Popup โครงสร้างอัตรากำลังใหม่

src/modules/02_organizationalNew/components/DialogFormAgency.vue

@@ -0,0 +1,212 @@
+<script setup lang="ts">
+import { ref, reactive, watch } from "vue";
+import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import DialogHeader from "@/components/DialogHeader.vue";
+import type {
+  FormDataAgency,
+  FormAgencyRef,
+  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 ocLevelOp = ref<DataOption[]>([]);
+
+const ocNameRef = ref<Object | null>(null);
+const shortNameRef = ref<Object | null>(null);
+const ocNoRef = ref<Object | null>(null);
+const ocLevelRef = ref<Object | null>(null);
+const telOutRef = ref<Object | null>(null);
+const telInRef = ref<Object | null>(null);
+const telRef = ref<Object | null>(null);
+
+const formData = reactive<FormDataAgency>({
+  ocName: "",
+  shortName: "",
+  ocNo: "",
+  ocLevel: "",
+  telOut: "",
+  telIn: "",
+  tel: "",
+});
+
+/** maping ref เข้าตัวแปรเพื่อเตรียมตรวจสอบ */
+const objectComplaintsRef: FormAgencyRef = {
+  ocName: ocNameRef,
+  shortName: shortNameRef,
+  ocNo: ocNoRef,
+  ocLevel: ocLevelRef,
+  telOut: telOutRef,
+  telIn: telInRef,
+  tel: telRef,
+};
+
+/** ฟังก์ชั่นตรวจสอบความถูกต้องของข้อมูลในฟอร์ม */
+function validateForm() {
+  const hasError = [];
+  for (const key in objectComplaintsRef) {
+    if (Object.prototype.hasOwnProperty.call(objectComplaintsRef, key)) {
+      const property = objectComplaintsRef[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.ocName"
+                  ref="ocNameRef"
+                  dense
+                  outlined
+                  for="#ocName"
+                  label="สรุปผลการพิจารณา"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `${'กรุณากรอกสรุปผลการพิจารณา'}`]"
+                />
+              </div>
+              <div class="col-2">
+                <q-input
+                  v-model="formData.shortName"
+                  ref="shortNameRef"
+                  dense
+                  outlined
+                  for="#shortName"
+                  label="ชื่อย่อ"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `${'กรุณากรอกชื่อย่อ'}`]"
+                />
+              </div>
+              <div class="col-2">
+                <q-input
+                  v-model="formData.ocNo"
+                  ref="ocNoRef"
+                  dense
+                  outlined
+                  for="#ocNo"
+                  label="รหัสหน่วยงาน"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `${'กรุณากรอกรหัสหน่วยงาน'}`]"
+                />
+              </div>
+              <div class="col-4">
+                <q-select
+                  for="#ocLevel"
+                  ref="ocLevelRef"
+                  dense
+                  hide-bottom-space
+                  outlined
+                  option-label="name"
+                  option-value="id"
+                  emit-value
+                  map-options
+                  v-model="formData.ocLevel"
+                  :options="ocLevelOp"
+                  label="ระดับของหน่วยงาน"
+                  :rules="[(val) => !!val || `${'กรุณาเลือกระดับของหน่วยงาน'}`]"
+                  lazy-rules
+                />
+              </div>
+              <div class="col-4">
+                <q-input
+                  v-model="formData.telOut"
+                  ref="telOutRef"
+                  dense
+                  outlined
+                  for="#telOut"
+                  label="หมายเลขโทรศัพท์ที่ติดต่อจากภายนอก"
+                  hide-bottom-space
+                  :rules="[
+                    (val) =>
+                      !!val ||
+                      `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อจากภายนอก'}`,
+                  ]"
+                />
+              </div>
+              <div class="col-4">
+                <q-input
+                  v-model="formData.telIn"
+                  ref="telInRef"
+                  dense
+                  outlined
+                  for="#telIn"
+                  label="หมายเลขโทรศัพท์ที่ติดต่อจากภายใน"
+                  hide-bottom-space
+                  :rules="[
+                    (val) =>
+                      !!val || `${'กรุณากรอกหมายเลขโทรศัพท์ที่ติดต่อจากภายใน'}`,
+                  ]"
+                />
+              </div>
+              <div class="col-4">
+                <q-input
+                  v-model="formData.tel"
+                  ref="telRef"
+                  dense
+                  outlined
+                  for="#tel"
+                  label="หมายเลขโทรสาร"
+                  hide-bottom-space
+                  :rules="[(val) => !!val || `${'กรุณากรอกหมายเลขโทรสาร'}`]"
+                />
+              </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>