hrms-mgt/src/modules/02_organizationalNew/components/DialogFormPosition.vue

<script setup lang="ts">
import { ref, reactive, watch } from "vue";
import { useQuasar } from "quasar";
import { useCounterMixin } from "@/stores/mixin";
import type { QTableProps } from "quasar";
import DialogHeader from "@/components/DialogHeader.vue";
import type {
  FormDataPosition,
  FormPositionRef,
  DataOption,
} from "@/modules/02_organizationalNew/interface/index/Main";

const props = defineProps({
  modal: Boolean,
  close: Function,
});

const $q = useQuasar();
const mixin = useCounterMixin();
const { dialogConfirm } = mixin;

const rows = ref<any[]>([]);
const ocLevelOp = ref<DataOption[]>([]);

const prefixNoRef = ref<Object | null>(null);
const positionNoRef = ref<Object | null>(null);

const formData = reactive<FormDataPosition>({
  prefixNo: "",
  positionNo: "",
  suffixNo: "",
  confirm: false,
});

/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
const objectPositionRef: FormPositionRef = {
  prefixNo: prefixNoRef,
  positionNo: positionNoRef,
};

const columns = ref<QTableProps["columns"]>([
    {
      name: "no",
      align: "left",
      label: "ลำดับ",
      sortable: false,
      field: "no",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
    },
    {
      name: "positionType",
      align: "left",
      label: "ประเภทตำเเหน่ง",
      sortable: true,
      field: "positionType",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
    },
    {
      name: "positionLevel",
      align: "left",
      label: "ระดับตำแหน่ง ด้าน/สาขา",
      sortable: true,
      field: "positionLevel",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
    },
    {
      name: "positionAdmin",
      align: "left",
      label: "ตำแหน่งทางการบริหาร",
      sortable: true,
      field: "positionAdmin",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
    },
    {
      name: "other",
      align: "left",
      label: "ฯลฯ",
      sortable: true,
      field: "other",
      headerStyle: "font-size: 14px",
      style: "font-size: 14px",
    },

  ]);
  const visibleColumns = ref<string[]>([
    "no",
    "positionType",
    "positionLevel",
    "positionAdmin",
    "other",
  ]);

/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
function validateForm() {
  const hasError = [];
  for (const key in objectPositionRef) {
    if (Object.prototype.hasOwnProperty.call(objectPositionRef, key)) {
      const property = objectPositionRef[key];
      if (property.value && typeof property.value.validate === "function") {
        const isValid = property.value.validate();
        hasError.push(isValid);
      }
    }
  }
  if (hasError.every((result) => result === true)) {
    onSubmit();
  } else {
  }
}

/** ฟังชั่น บันทึก */
function onSubmit() {
  dialogConfirm($q, () => {
    console.log(formData);
  });
}

watch(
  () => props.modal,
  () => {
    if (props.modal === true) {
      ocLevelOp.value = [
        {
          id: "id1",
          name: "id1",
        },
        {
          id: "id2",
          name: "id2",
        },
      ];
    }
  }
);
</script>
<template>
  <template>
    <q-dialog v-model="props.modal" persistent>
      <q-card style="min-width: 50vw">
        <form @submit.prevent="validateForm">
          <DialogHeader :tittle="`เพิ่มตำแหน่ง`" :close="props.close" />
          <q-separator />

          <q-card-section>
            <div class="row q-col-gutter-sm">
              <div class="col-4">
                <q-input
                  v-model="formData.prefixNo"
                  ref="prefixNoRef"
                  dense
                  outlined
                  for="#prefixNo"
                  label="Prefix เลขที่ตำเเหน่ง"
                  hide-bottom-space
                  :rules="[
                    (val) => !!val || `${'กรุณากรอกPrefix เลขที่ตำเเหน่ง'}`,
                  ]"
                />
              </div>
              <div class="col-4">
                <q-input
                  v-model="formData.positionNo"
                  ref="positionNoRef"
                  dense
                  outlined
                  for="#positionNo"
                  label="เลขที่ตำแหน่ง"
                  hide-bottom-space
                  :rules="[(val) => !!val || `${'กรุณากรอกเลขที่ตำแหน่ง'}`]"
                />
              </div>
              <div class="col-4">
                <q-input
                  v-model="formData.suffixNo"
                  dense
                  outlined
                  for="#suffixNo"
                  label="Suffix เลขที่ตำแหน่ง"
                />
              </div>
              <div class="col-12">
                <d-table
                  ref="table"
                  :columns="columns"
                  :rows="rows"
                  row-key="idcard"
                  flat
                  bordered
                  :paging="true"
                  dense
                  class="custom-header-table"
                  :visible-columns="visibleColumns"
                >
                  <template v-slot:header="props">
                    <q-tr :props="props">
                      <q-th
                        v-for="col in props.cols"
                        :key="col.name"
                        :props="props"
                        style="color: #000000; font-weight: 500"
                      >
                        <span class="text-weight-medium">{{ col.label }}</span>
                      </q-th>
                    </q-tr>
                  </template>
                  <template v-slot:body="props">
                    <q-tr :props="props" class="cursor-pointer">
                      <q-td
                        v-for="col in props.cols"
                        :key="col.name"
                        :props="props"
                      >
                        <div v-if="col.name == 'no'">
                          {{ props.rowIndex + 1 }}
                        </div>
                        <div v-else>
                          {{ col.value }}
                        </div>
                      </q-td>
                    </q-tr>
                  </template>
                </d-table>
              </div>
              <div class="col-12 q-mt-sm">
                <q-checkbox dense v-model="formData.confirm" label="ไม่ผูกกับตำแหน่งก่อนหน้า" color="teal" />
              </div>
            </div>
          </q-card-section>
          <q-separator />
          <q-card-actions align="right" class="bg-white text-teal">
            <q-btn type="submit" :label="`บันทึก`" color="public" />
          </q-card-actions>
        </form>
      </q-card>
    </q-dialog>
  </template>
</template>