hrms-mgt/src/modules/18_command/components/Main/DialogFormCommand.vue

<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";

import { useRouter } from "vue-router";
import { useCounterMixin } from "@/stores/mixin";
import { useCommandListStore } from "@/modules/18_command/store/ListStore";
import http from "@/plugins/http";
import config from "@/app.config";

import type { FormCommand } from "@/modules/18_command/interface/request/Main";
import type { DataCommandType } from "@/modules/18_command/interface/response/Main";

import DialogHeader from "@/components/DialogHeader.vue";

const $q = useQuasar();
const router = useRouter();
const store = useCommandListStore();
const { dialogConfirm, showLoader, hideLoader, messageError, success } =
  useCounterMixin();

/** props*/
const modal = defineModel<boolean>("modal", { required: true }); //เปิด,ปิด Popup
const isCopy = defineModel<boolean>("isCopy", { required: true }); //สถานะทำสำเนา
const commandId = defineModel<string>("commandId", { default: "" }); // id ประเภทคำสั่งที่คำสำเนา

const commandType = ref<string>(""); //ประเภทคำสั่ง
const commandNo = ref<string>(""); //คำสั่งเลขที่
const commandYear = ref<number>(new Date().getFullYear()); //ปี

const listCommand = ref<DataCommandType[]>([]); //ข้อมูลรายการประเภทคำสั่ง
const commandOp = ref<DataCommandType[]>([]); //ตัวเลือกประเภทคำสั่ง

/** ฟังก์ชันดึงข้อมูลปรเภทคำสั่ง*/
async function fetchCommandType() {
  const data = await store.fetchCommandType();
  if (data) {
    listCommand.value = data;
    commandOp.value = data;
  }
}

/** ฟังก์ชันยืนยันการบันทึกข้อมูล */
function onSubmit() {
  dialogConfirm($q, () => {
    showLoader();
    const body: FormCommand = {
      commandYear: commandYear.value,
      commandNo: commandNo.value,
      commandTypeId: !isCopy.value ? commandType.value : undefined,
    };
    const path = !isCopy.value
      ? config.API.command
      : config.API.commandAction(commandId.value, "copy");

    http[!isCopy.value ? "post" : "put"](path, body)
      .then(async (res) => {
        const id = await res.data.result;
        router.push(`/command/edit/${id}`);
        success($q, "บันทึกข้อมูลสำเร็จ");
        onClose();
      })
      .catch((err) => {
        messageError($q, err);
      })
      .finally(() => {
        hideLoader();
      });
  });
}

/**
 * ฟังก์ชันค้นหาข้อมูลรายการประเภทคำสั่ง
 * @param val คำที่ค้องการค้นหา
 * @param update function จาก quasar
 */
function filterSelector(val: string, update: Function) {
  update(() => {
    commandOp.value = listCommand.value.filter(
      (v: any) => v.name.indexOf(val) > -1
    );
  });
}

/**
 * ฟังก์ชันปิด Popup
 * และกำหนด  commandNo commandYear เป็นค่า Defult
 * */
function onClose() {
  modal.value = false;
  commandNo.value = "";
  commandType.value = "";
  commandYear.value = new Date().getFullYear();
}

/**
 * ดูการเปลี่ยนแปลงของ modal
 * เมื่อ  modal เป็น True และ isCopy เป็น False จะเรียก ฟังก์ชัน fetchCommandType เพื่อดึงข้อมูลปรเภทคำสั่ง
 */
watch(modal, () => {
  //เช็คค่าของ modal และ isCopy
  if (modal.value && !isCopy.value) {
    fetchCommandType();
  }
});
</script>

<template>
  <q-dialog v-model="modal" persistent>
    <q-card style="max-width: 35%">
      <q-form greedy @submit.prevent @validation-success="onSubmit">
        <DialogHeader
          :tittle="isCopy ? 'ทำสำเนาคำสั่ง' : 'เพิ่มคำสั่ง'"
          :close="onClose"
        />
        <q-separator />
        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-12" v-if="!isCopy">
              <q-select
                class="inputgreen"
                v-model="commandType"
                :label="`${'ประเภทคำสั่ง'}`"
                dense
                emit-value
                map-options
                option-label="name"
                :options="commandOp"
                option-value="id"
                lazy-rules
                use-input
                hide-selected
                fill-input
                hide-bottom-space
                outlined
                :rules="[(val:string) => !!val || `${'กรุณาเลือกประเภทคำสั่ง'}`]"
                @filter="(inputValue:string,
                    doneFn:Function) => filterSelector(inputValue, doneFn) "
              >
                <template v-slot:no-option>
                  <q-item>
                    <q-item-section class="text-grey">
                      ไม่มีข้อมูล
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
            </div>
            <div class="col-6">
              <q-input
                class="inputgreen"
                outlined
                dense
                v-model="commandNo"
                hide-bottom-space
                :label="`${'คำสั่งเลขที่'}`"
                lazy-rules
              />
            </div>
            <label class="col-1 flex justify-center items-center text-bold"
              >/</label
            >
            <div class="col-5">
              <datepicker
                menu-class-name="modalfix"
                v-model="commandYear"
                :locale="'th'"
                autoApply
                year-picker
                :enableTimePicker="false"
                class="inputgreen"
              >
                <template #year="{ year }">{{ year + 543 }}</template>
                <template #year-overlay-value="{ value }">{{
                  parseInt(value + 543)
                }}</template>
                <template #trigger>
                  <q-input
                    dense
                    outlined
                    hide-bottom-space
                    :model-value="
                      commandYear == null ? null : commandYear + 543
                    "
                    label="ปี พ.ศ."
                    :rules="[(val:string) => !!val || 'กรุณากรอกปี พ.ศ.']"
                  >
                    <template v-slot:prepend>
                      <q-icon
                        name="event"
                        class="cursor-pointer"
                        style="color: var(--q-primary)"
                      >
                      </q-icon>
                    </template>
                  </q-input>
                </template>
              </datepicker>
            </div>
          </div>
        </q-card-section>
        <q-separator />

        <q-card-actions align="right">
          <q-btn label="บันทึก" color="public" type="submit" />
        </q-card-actions>
      </q-form>
    </q-card>
  </q-dialog>
</template>

<style scoped></style>