hrms-mgt/src/modules/13_salary/components/SalaryChart/DialogFormMain.vue

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

import type {
  DataOption,
  ObjectSalaryRef,
} from "@/modules/13_salary/interface/index/Main";

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

import { useCounterMixin } from "@/stores/mixin";

const $q = useQuasar();
const {
  date2Thai,
  dialogConfirm,
  showLoader,
  hideLoader,
  messageError,
  success,
} = useCounterMixin();

const modal = defineModel<boolean>("modal", { required: true });
const props = defineProps({
  typeAction: {
    type: String,
    required: true,
  },
  data: {
    type: Object,
    defult: [],
  },
});

const formData = reactive({
  salaryType: "", //*ประเภทผัง (OFFICER->"ข้าราชการกรุงเทพมหานครสามัญ",EMPLOYEE->"ลูกจ้างประจำกรุงเทพมหานคร")
  posType: "", //*ประเภทของตำแหน่ง
  posLevel: "", //*ระดับของตำแหน่ง
  isActive: false, //*สถานะการใช้งาน
  date: null, //ให้ไว้ ณ วันที่
  startDate: null, //วันที่มีผลบังคับใช้
  endDate: null, //วันที่สิ้นสุดบังคับใช้
  detail: "", //คำอธิบาย
});

/** ตัวแปร ref สำหรับแสดง validate */
const salaryTypeRef = ref<Object | null>(null);
const posTypeRef = ref<Object | null>(null);
const posLevelRef = ref<Object | null>(null);
const dateRef = ref<Object | null>(null);
const startDateRef = ref<Object | null>(null);
const endDateRef = ref<Object | null>(null);

const ObjectRef: ObjectSalaryRef = {
  salaryType: salaryTypeRef,
  posTyp: posTypeRef,
  posLevel: posLevelRef,
  date: dateRef,
  startDate: startDateRef,
  endDate: endDateRef,
};

const salaryTypeOption = ref<DataOption[]>([
  { id: "OFFICER", name: "ข้าราชการกรุงเทพมหานครสามัญ" },
  { id: "EMPLOYEE", name: "ลูกจ้างประจำกรุงเทพมหานคร" },
]);

const documentFile = ref<any>(null);
const itemsDocument = ref<any>([]);

const title = computed(() => {
  const name =
    props.typeAction === "add"
      ? "เพิ่มผังบัญชีเงินเดือน"
      : props.typeAction === "edit"
      ? "แก้ไขผังบัญชีเงินเดือน"
      : "บัญชีเงินเดือน";

  return name;
});

watch(
  () => modal.value,
  () => {
    if (modal.value && props.typeAction === "edit") {
      if (props.data) {
        formData.salaryType = props.data.salaryType;
        formData.posType = props.data.posType;
        formData.posLevel = props.data.posLevel;
        formData.isActive = props.data.isActive;
        formData.date = props.data.date;
        formData.startDate = props.data.startDate;
        formData.endDate = props.data.endDate;
        formData.detail = props.data.detail;
        fetchDocumentFile(props.data.id);
      }
    }
  }
);

function closeDialog() {
  modal.value = !modal.value;
  clearFormData();
}

function clearFormData() {
  formData.salaryType = "";
  formData.posType = "";
  formData.posLevel = "";
  formData.isActive = false;
  formData.date = null;
  formData.startDate = null;
  formData.endDate = null;
  formData.detail = "";
  documentFile.value = null;
}
function fetchDocumentFile(id: string) {}
function uploadDocumentFile() {}

function onClickSubmit() {
  const hasError = [];
  for (const key in ObjectRef) {
    if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
      const property = ObjectRef[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }
  if (hasError.every((result) => result === true)) {
    createSalary();
  }
}

function createSalary() {
  dialogConfirm($q, () => {
    if (props.typeAction === "add") {
      success($q, "add");
    } else {
      success($q, "edit");
    }
    closeDialog();
  });
}

/** function checkEndDate*/
function checkEndDate() {
  if (formData.endDate !== null && formData.startDate !== null) {
    if (formData.endDate < formData.startDate) {
      formData.endDate = null;
    }
  }
}
</script>

<template>
  <q-dialog v-model="modal" full-width persistent>
    <q-card>
      <Header :tittle="title" :close="closeDialog" />
      <q-separator />

      <q-card-section class="q-pt-none">
        <div class="row q-gutter-sm q-pa-md">
          <div class="row col-xs-12 col-md-9 q-col-gutter-sm">
            <div class="col-xs-12 col-md-3">
              <q-select
                ref="salaryTypeRef"
                dense
                hide-bottom-space
                outlined
                option-label="name"
                option-value="id"
                emit-value
                map-options
                v-model="formData.salaryType"
                :options="salaryTypeOption"
                label="ประเภทผังบัญชีเงินเดือน"
                :rules="[(val) => !!val || 'กรุณาเลือกประเภทผังบัญชีเงินเดือน']"
                lazy-rules
              />
            </div>

            <div class="col-xs-12 col-md-3">
              <q-select
                ref="posTypeRef"
                dense
                hide-bottom-space
                outlined
                option-label="name"
                option-value="id"
                emit-value
                map-options
                v-model="formData.posType"
                :options="salaryTypeOption"
                label="ประเภทตำแหน่ง/กลุ่ม"
                :rules="[(val) => !!val || 'กรุณาเลือกประเภทตำแหน่ง/กลุ่ม']"
                lazy-rules
              />
            </div>

            <div class="col-xs-12 col-md-3">
              <q-select
                ref="posLevelRef"
                dense
                hide-bottom-space
                outlined
                option-label="name"
                option-value="id"
                emit-value
                map-options
                v-model="formData.posLevel"
                :options="salaryTypeOption"
                label="ระดับ"
                :rules="[(val) => !!val || 'กรุณาเลือกระดับ']"
                lazy-rules
              />
            </div>

            <div
              class="col-xs-12 col-md-3"
              style="display: flex; justify-content: flex-end"
            >
              <q-toggle
                color="primary"
                label="สถานะการใช้งาน"
                v-model="formData.isActive"
              />
            </div>

            <div class="col-xs-12 col-md-4">
              <datepicker
                menu-class-name="modalfix"
                v-model="formData.date"
                :locale="'th'"
                autoApply
                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
                    ref="dateRef"
                    outlined
                    dense
                    hide-bottom-space
                    :model-value="
                      formData.date != null ? date2Thai(formData.date) : null
                    "
                    label="ให้ไว ณ วันที่"
                    :rules="[
                      (val) => !!val || `${'กรุณาเลือกวันที่ ให้ไว ณ วันที่'}`,
                    ]"
                    lazy-rules
                  >
                    <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 class="col-xs-12 col-md-4">
              <datepicker
                menu-class-name="modalfix"
                v-model="formData.startDate"
                :locale="'th'"
                autoApply
                borderless
                :enableTimePicker="false"
                week-start="0"
                @update:model-value="checkEndDate"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    ref="startDateRef"
                    outlined
                    dense
                    hide-bottom-space
                    :model-value="
                      formData.startDate != null
                        ? date2Thai(formData.startDate)
                        : null
                    "
                    label="วันที่มีผลบังคับใช้"
                    :rules="[
                      (val) => !!val || `${'กรุณาเลือกวันที่มีผลบังคับใช้'}`,
                    ]"
                    lazy-rules
                  >
                    <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 class="col-xs-12 col-md-4">
              <datepicker
                menu-class-name="modalfix"
                v-model="formData.endDate"
                :locale="'th'"
                autoApply
                borderless
                :enableTimePicker="false"
                week-start="0"
                :min-date="formData.startDate"
              >
                <template #year="{ year }">
                  {{ year + 543 }}
                </template>
                <template #year-overlay-value="{ value }">
                  {{ parseInt(value + 543) }}
                </template>
                <template #trigger>
                  <q-input
                    ref="endDateRef"
                    outlined
                    dense
                    hide-bottom-space
                    :model-value="
                      formData.endDate != null
                        ? date2Thai(formData.endDate)
                        : null
                    "
                    label="วันที่สิ้นสุดบังคับใช้"
                    :rules="[
                      (val) => !!val || `${'กรุณาเลือกวันที่สิ้นสุดบังคับใช้'}`,
                    ]"
                    lazy-rules
                  >
                    <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 class="col-12">
              <q-input
                v-model="formData.detail"
                outlined
                dense
                type="textarea"
                label="คำอธิบาย"
              />
            </div>
          </div>
          <div class="col-xs-12 col-md-3">
            <q-card
              bordered
              class="row col-12"
              style="border: 1px solid #d6dee1"
            >
              <div class="col-12 text-weight-medium bg-grey-1 q-py-sm q-px-md">
                อัปโหลดเอกสารอ้างอิง
              </div>
              <div class="col-12"><q-separator /></div>
              <div class="row col-12 q-col-gutter-y-sm q-pa-sm">
                <div class="col-12 row">
                  <q-file
                    v-if="props.typeAction === 'edit'"
                    class="col-12"
                    outlined
                    dense
                    v-model="documentFile"
                    label="เอกสารอ้างอิง"
                    hide-bottom-space
                  >
                    <template v-slot:prepend>
                      <q-icon name="attach_file" color="primary" />
                    </template>
                    <template v-slot:after>
                      <q-btn
                        v-if="documentFile"
                        size="14px"
                        flat
                        round
                        dense
                        color="add"
                        icon="mdi-upload"
                        @click="uploadDocumentFile"
                        ><q-tooltip>อัปโหลดเอกสาร</q-tooltip></q-btn
                      >
                    </template>
                  </q-file>
                </div>

                <div v-if="itemsDocument.length > 0" class="col-xs-12 row">
                  <q-list class="full-width rounded-borders" bordered separator>
                    <q-item
                      v-for="file in itemsDocument"
                      :key="file.id"
                      clickable
                      v-ripple
                    >
                      <q-item-section>{{ file.fileName }}</q-item-section>
                      <q-item-section avatar>
                        <div class="row">
                          <div>
                            <q-btn
                              dense
                              flat
                              round
                              size="12px"
                              color="blue"
                              icon="mdi-download-outline"
                            >
                              <q-tooltip>ดาวน์โหลดไฟล์</q-tooltip>
                            </q-btn>
                          </div>
                          <div>
                            <q-btn
                              dense
                              flat
                              round
                              size="12px"
                              color="red"
                              icon="mdi-delete-outline"
                              ><q-tooltip>ลบไฟล์</q-tooltip></q-btn
                            >
                          </div>
                        </div>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </div>

                <div class="col-12" v-else>
                  <q-card class="q-pa-md" bordered> ไม่มีรายการเอกสาร </q-card>
                </div>
              </div>
            </q-card>
          </div>
        </div>
      </q-card-section>
      <q-separator />

      <q-card-actions align="right" class="bg-white text-teal">
        <q-btn label="บันทึก" color="secondary" @click="onClickSubmit"
          ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
        >
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<style lang="scss" scoped></style>