ทะเบียนประวัติ: เพิ่มfieldยศ+วันเดือนปีเกิด

src/modules/04_registryNew/components/DialogAddData.vue

@@ -10,13 +10,14 @@ import type {
   FormAddPerson,
   MyObjectRef,
 } from "@/modules/04_registryNew/interface/request/Main";
-
+import { useProfileDataStore } from "@/modules/04_registryNew/stores/profile";
 import DialogHeader from "@/components/DialogHeader.vue";
 
 /** importStore*/
 import { useRegistryNewDataStore } from "@/modules/04_registryNew/store";
 import { useCounterMixin } from "@/stores/mixin";
 
+const profileStore = useProfileDataStore();
 const $q = useQuasar();
 const store = useRegistryNewDataStore();
 const {
@@ -27,8 +28,9 @@ const {
   showLoader,
   hideLoader,
   dialogMessageNotify,
+  date2Thai,
 } = useCounterMixin();
-
+const { calculateAge } = profileStore;
 const modal = defineModel<boolean>("modal", { required: true });
 
 const props = defineProps({
@@ -37,8 +39,9 @@ const props = defineProps({
 });
 
 const prefixOps = ref<DataOption[]>([]);
+const rankOps = ref<DataOption[]>([]);
 const levelOps = ref<DataType[]>([]);
-
+const age = ref<string | null>("");
 const formData = reactive<FormAddPerson>({
   prefix: "",
   firstName: "",
@@ -47,6 +50,8 @@ const formData = reactive<FormAddPerson>({
   position: "",
   posTypeId: "",
   posLevelId: "",
+  rank: "",
+  birthDate: null,
 });
 
 const prefixRef = ref<object | null>(null);
@@ -80,6 +85,19 @@ function fetchPrefix() {
       messageError($q, err);
     });
 }
+function fetchRank() {
+  http
+    .get(config.API.orgRank)
+    .then((res) => {
+      rankOps.value = res.data.result.map((v: any) => ({
+        id: v.name,
+        name: v.name,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
 
 /**
  * function ตรวจสอบเลขประจำตัวประชาชน
@@ -129,6 +147,9 @@ function clearFormData() {
   formData.position = "";
   formData.posTypeId = "";
   formData.posLevelId = "";
+  formData.rank = "";
+  age.value = "";
+  formData.birthDate = null;
 }
 
 function validateForm() {
@@ -148,20 +169,21 @@ function validateForm() {
 }
 
 async function onSubmit() {
-  showLoader();
-  await http
-    .post(config.API.registryNew, formData)
-    .then(() => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
-      props.fetchData?.();
-      closeDialog();
-    })
-    .catch((err) => {
-      messageError($q, err);
-    })
-    .finally(() => {
-      hideLoader();
-    });
+  dialogConfirm($q, async () => {
+    await http
+      .post(config.API.registryNew, formData)
+      .then(() => {
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        props.fetchData?.();
+        closeDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  });
 }
 
 watch(
@@ -169,10 +191,20 @@ watch(
   () => {
     if (modal.value) {
       fetchPrefix();
+      fetchRank();
       props.fetchType?.();
     }
   }
 );
+
+watch(
+  () => formData.birthDate,
+  (v) => {
+    if (v) {
+      age.value = calculateAge(v);
+    }
+  }
+);
 </script>
 <template>
   <q-dialog v-model="modal" persistent>
@@ -184,21 +216,41 @@ watch(
 
         <q-separator />
         <q-card-section class="q-pa-md q-col-gutter-md">
-          <q-select
-            bg-color="white"
-            ref="prefixRef"
-            v-model="formData.prefix"
-            label="คำนำหน้าชื่อ"
-            outlined
-            dense
-            :options="prefixOps"
-            option-label="name"
-            option-value="id"
-            map-options
-            hide-bottom-space
-            :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
-            emit-value
-          />
+          <div class="row q-gutter-sm">
+            <div class="col">
+              <q-select
+                bg-color="white"
+                ref="prefixRef"
+                v-model="formData.prefix"
+                label="คำนำหน้าชื่อ"
+                outlined
+                dense
+                :options="prefixOps"
+                option-label="name"
+                option-value="id"
+                map-options
+                hide-bottom-space
+                :rules="[(val) => !!val || 'กรุณาเลือกคำนำหน้าชื่อ']"
+                emit-value
+              />
+            </div>
+            <div class="col">
+              <q-select
+                bg-color="white"
+                ref="prefixRef"
+                v-model="formData.rank"
+                label="ยศ"
+                outlined
+                dense
+                :options="rankOps"
+                option-label="name"
+                option-value="id"
+                map-options
+                hide-bottom-space
+                emit-value
+              />
+            </div>
+          </div>
           <q-input
             bg-color="white"
             ref="firstNameRef"
@@ -288,6 +340,65 @@ watch(
             hide-bottom-space
             :rules="[(val) => !!val || 'กรุณาเลือกระดับตำแหน่ง']"
           />
+          <div class="row q-col-gutter-sm">
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <datepicker
+                autoApply
+                borderless
+                week-start="0"
+                menu-class-name="modalfix"
+                v-model="formData.birthDate"
+                :locale="'th'"
+              >
+                <template #year="{ year }">
+                  {{ year + 543 }}
+                </template>
+                <template #year-overlay-value="{ value }">
+                  {{ parseInt(value + 543) }}
+                </template>
+                <template #trigger>
+                  <q-input
+                    for="inputDatereceive"
+                    ref="dateReceivedRef"
+                    outlined
+                    dense
+                    hide-bottom-space
+                    class="inputgreen"
+                    :model-value="
+                      formData.birthDate != null
+                        ? date2Thai(formData.birthDate)
+                        : null
+                    "
+                    label="วัน/เดือน/ปี เกิด"
+                    :rules="[
+                      (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี เกิด'}`,
+                    ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        color="primary"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-input
+                dense
+                outlined
+                lazy-rules
+                hide-bottom-space
+                readonly
+                class="inputgreen"
+                v-model="age"
+                label="อายุ"
+              />
+            </div>
+          </div>
         </q-card-section>
 
         <q-separator />

src/modules/04_registryNew/interface/request/Main.ts

@@ -12,6 +12,8 @@ interface FormFilter {
 }
 
 interface FormAddPerson {
+  birthDate: Date | null,
+  rank: string,
   prefix: string;
   firstName: string;
   lastName: string;