hrms-user/src/modules/05_leave/views/AddPage.vue

<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";

import Form from "@/modules/05_leave/componenst/Form.vue";
import Form3 from "@/modules/05_leave/componenst/Forms/01_SickForm.vue";
import { useLeaveStore } from "@/modules/05_leave/store";
import http from "@/plugins/http";
import config from "@/app.config";
import type { QForm } from "quasar";

const dataStore = useLeaveStore();

const router = useRouter();
const route = useRoute();
const myform = ref<QForm | null>(null);
const $q = useQuasar();

const model = ref("");
const modelSpecific = ref(null);

const clickBack = () => {
  router.push(`/leave`);
};

onMounted(() => {});

const saveAbsence = () => {
  $q.dialog({
    title: "ยืนยันการยื่นข้อมูลลาออก",
    message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
    cancel: {
      flat: true,
      color: "negative",
    },
    persistent: true,
  })
    .onOk(() => {
      // createFormresign()
      if (model.value !== "7") {
        console.log(1);
      } else if (model.value === "7") {
        console.log(2);
      }
      router.push(`/leave`);
    })
    .onCancel(() => {})
    .onDismiss(() => {});
};
</script>
<template>
  <div class="col-12 row justify-center">
    <div class="col-xs-12 col-sm-12 col-md-11">
      <div class="toptitle text-white col-12 row items-center">
        <q-btn
          icon="mdi-arrow-left"
          unelevated
          round
          dense
          flat
          color="primary"
          class="q-mr-sm"
          @click="clickBack"
        />
        <div>ยื่นใบลา</div>
      </div>
      <q-form ref="myform" class="col-12">
        <q-card bordered>
          <div class="col-12 row q-col-gutter-md q-pa-md">
            <div class="col-xs-12 col-sm-12">
              <q-icon name="mdi-numeric-1-circle" size="20px" color="primary" />
              <div class="q-pl-sm text-weight-bold text-dark">
                เลือกประเภทการลา
              </div>
              <div class="col-12 row q-pa-sm q-col-gutter-sm">
                <q-select
                  dense
                  class="q-ml-lg col-6"
                  outlined
                  v-model="model"
                  :options="dataStore.options"
                  option-value="id"
                  option-label="name"
                  emit-value
                  map-options
                  prefix="ประเภทใบลา :"
                  @update:model-value="dataStore.typeConvert(model,null)"
                />
                <!-- v-if (ลาอุปสมบทหรือลาประกอบพิธีฮัจย์ฯ||ลาไปศึกษา ฝึกอบรม ปฎิบัติการวิจัย หรือดูงาน) -->
                <div
                  class="col-6 row q-pa-sm"
                  v-if="model === '5' || model === '7'"
                >
                  <q-select
                    dense
                    class="q-ml-lg col-6"
                    outlined
                    v-model="modelSpecific"
                    :options="
                      model === '5'
                        ? dataStore.optionsOrdination
                        : dataStore.optionsSpecific
                    "
                    option-value="id"
                    option-label="name"
                    emit-value
                    map-options
                    prefix="ประเภทใบลา :"
                    @update:model-value="dataStore.typeConvert(model,modelSpecific)"
                  />
                </div>
              </div>
              <q-icon name="mdi-numeric-2-circle" size="20px" color="primary" />
              <div class="q-pl-sm text-weight-bold text-dark">ข้อมูลการลา</div>
              <Form :model="model" />
            </div>
            <div v-if="model">
              <q-icon name="mdi-numeric-3-circle" size="20px" color="primary" />
              <div class="q-pl-sm text-weight-bold text-dark">กรอกข้อมูล</div>
              <Form3 v-if="model === '0' || model === '1' || model === '2'"/>
            </div>
          </div>
          <q-separator />
          <div class="row col-12 q-pa-md">
            <q-space />
            <q-btn
              unelevated
              dense
              class="q-px-md items-center btnBlue"
              label="บันทึก"
              @click="saveAbsence"
            />
          </div>
        </q-card>
      </q-form>
    </div>
  </div>
</template>
<style scoped lang="scss">
.btnBlue {
  background-color: #016987;
  color: #fff;
}
</style>