hrms-user/src/modules/03_leave/views/AddLeave.vue

<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="router.go(-1)"
        />
        <div v-if="routeName == 'AddLeave'">เพิ่มเรื่องลาออก</div>
        <div v-else>รายละเอียดเรื่องลาออก</div>
      </div>
      <div 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-card bordered flat>
                <div
                  class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold"
                >
                  ลาออก
                </div>
                <q-separator />
                <div class="col-12 row q-pa-sm q-col-gutter-sm">
                  <q-input
                    class="col-8"
                    dense
                    outlined
                    v-model="tranferOrg"
                    label="สถานที่ยื่นขอลาออกจากราชการ"
                    :readonly="routeName != 'AddLeave'"
                  />
                  <datepicker
                    class="col-2"
                    menu-class-name="modalfix"
                    v-model="dateCommand"
                    :locale="'th'"
                    autoApply
                    readonly
                    borderless
                    :enableTimePicker="false"
                    week-start="0"
                  >
                    <template #year="{ year }">
                      {{ year + 543 }}
                    </template>
                    <template #year-overlay-value="{ value }">
                      {{ parseInt(value + 543) }}
                    </template>
                    <template #trigger>
                      <q-input
                        outlined
                        readonly
                        dense
                        class="full-width datepicker"
                        :model-value="
                          dateCommand != null ? date2Thai(dateCommand) : null
                        "
                        :label="`${'วันที่ยื่นขอลาออกจากราชการ'}`"
                        :rules="[
                          (val) =>
                            !!val ||
                            `${'กรุณาเลือกวันที่ยื่นขอลาออกจากราชการ'}`,
                        ]"
                      >
                        <template v-slot:prepend>
                          <q-icon
                            name="event"
                            class="cursor-pointer"
                            style="color: var(--q-primary)"
                          >
                          </q-icon>
                        </template>
                      </q-input>
                    </template>
                  </datepicker>
                  <datepicker
                    class="col-2"
                    menu-class-name="modalfix"
                    v-model="dateLeave"
                    :locale="'th'"
                    autoApply
                    borderless
                    :enableTimePicker="false"
                    week-start="0"
                    :readonly="routeName != 'AddLeave'"
                  >
                    <template #year="{ year }">
                      {{ year + 543 }}
                    </template>
                    <template #year-overlay-value="{ value }">
                      {{ parseInt(value + 543) }}
                    </template>
                    <template #trigger>
                      <q-input
                        outlined
                        dense
                        :readonly="routeName != 'AddLeave'"
                        class="full-width datepicker"
                        :model-value="
                          dateLeave != null ? date2Thai(dateLeave) : null
                        "
                        :label="`${'วันที่ขอลาออกจากราชการ'}`"
                        :rules="[
                          (val) =>
                            !!val || `${'กรุณาเลือกวันที่ขอลาออกจากราชการ'}`,
                        ]"
                      >
                        <template v-slot:prepend>
                          <q-icon
                            name="event"
                            class="cursor-pointer"
                            style="color: var(--q-primary)"
                          >
                          </q-icon>
                        </template>
                      </q-input>
                    </template>
                  </datepicker>
                  <q-input
                    class="col-12"
                    dense
                    outlined
                    v-model="noteReason"
                    label="เหตุผลที่ลาออกจากราชการ"
                    type="textarea"
                    :readonly="routeName != 'AddLeave'"
                  />

                  <q-separator />
                </div>
              </q-card>
            </div>
          </div>
          <div class="row col-12 q-pa-sm" v-if="routeName == 'AddLeave'">
            <q-space />
            <q-btn
              unelevated
              dense
              class="q-px-md items-center"
              color="primary"
              label="ยื่นเรื่องขอลาออก"
              @click="saveResing"
              :disable="tranferOrg == '' && noteReason == ''"
            />
          </div>
        </q-card>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { QTableProps } from "quasar";
import { ref, onMounted } from "vue";
import { useQuasar } from "quasar";
import { useRouter, useRoute } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import http from "@/plugins/http";
import config from "@/app.config";

const mixin = useCounterMixin();
const { date2Thai, dateToISO, success, messageError, showLoader, hideLoader } =
  mixin;
const router = useRouter();
const route = useRoute();
const $q = useQuasar();
const routeName = router.currentRoute.value.name;
const id = ref<string>("");

const tranferOrg = ref("");
const dateCommand = ref<Date>(new Date());
const dateLeave = ref<Date>(new Date());
const noteReason = ref("");

onMounted(() => {
  if (route.params.id !== undefined) {
    id.value = route.params.id.toString();
    fectDataresign(id.value);
  }
});
const saveResing = () => {
  $q.dialog({
    title: "ยืนยันการยื่นข้อมูลลาออก",
    message: "ต้องการยื่นข้อมูลลาออกนี้ใช่หรือไม่?",
    cancel: {
      flat: true,
      color: "negative",
    },
    persistent: true,
  })
    .onOk(async () => {
      createFormresign();
    })
    .onCancel(() => {})
    .onDismiss(() => {});
};
const createFormresign = async () => {
  const formData = new FormData();
  formData.append("Location", tranferOrg.value);
  formData.append("SendDate", dateToISO(dateCommand.value));
  formData.append("ActiveDate", dateToISO(dateLeave.value));
  formData.append("Reason", noteReason.value);
  await http
    .post(config.API.listResign(), formData)
    .then((res: any) => {
      // console.log(res);
      success($q, "บันทึกข้อมูลสำเร็จ");
      router.push(`/leave`);
    })
    .catch((e: any) => {
      messageError($q, e);
      console.log(e);
    });
};
const fectDataresign = async (id: string) => {
  showLoader();
  await http
    .get(config.API.resingByid(id))
    .then((res: any) => {
      let data = res.data.result;
      // console.log(data);
      (tranferOrg.value = data.location),
        (dateCommand.value = data.sendDate),
        (dateLeave.value = data.activeDate),
        (noteReason.value = data.reason);
    })
    .catch((e: any) => {
      console.log(e);
      messageError($q, e);
    })
    .finally(() => {
      hideLoader();
    });
};
</script>