fix: form component

src/components/02_personnel-management/FormPerson.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import useUserStore from 'src/stores/user';
+import { dateFormat } from 'src/utils/datetime';
+
+const userStore = useUserStore();
+
+const firstName = defineModel<string>('firstName');
+const lastName = defineModel<string>('lastName');
+const firstNameEN = defineModel<string>('firstNameEN');
+const lastNameEN = defineModel<string>('lastNameEN');
+const telephoneNo = defineModel<string>('telephoneNo');
+const email = defineModel<string>('email');
+const gender = defineModel<string>('gender');
+const birthDate = defineModel<Date | null>('birthDate');
+
+defineProps<{
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+}>();
+</script>
+<template>
+  <div class="col-3 app-text-muted">• ข้อมูลบุคลากร</div>
+  <div class="col-9 row q-col-gutter-md">
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-3"
+      label="ชื่อ ภาษาไทย"
+      v-model="firstName"
+      :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาไทย']"
+    />
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-3"
+      label="นามสกุล ภาษาไทย"
+      v-model="lastName"
+      :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาไทย']"
+    />
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-3"
+      label="ชื่อ ภาษาอังกฤษ"
+      v-model="firstNameEN"
+      :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาอังกฤษ']"
+    />
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      hide-bottom-space
+      class="col-3"
+      label="นามสกุล ภาษาอังกฤษ"
+      v-model="lastNameEN"
+      :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาอังกฤษ']"
+    />
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      class="col-6"
+      label="เบอร์โทร"
+      v-model="telephoneNo"
+      mask="##########"
+    />
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      label="อีเมล"
+      class="col-6"
+      v-model="email"
+    />
+    <q-select
+      :dense="dense"
+      :outlined="outlined"
+      :readonly="readonly"
+      :hide-dropdown-icon="readonly"
+      emit-value
+      map-options
+      label="เพศ"
+      class="col-3"
+      bg-color="white"
+      option-label="label"
+      option-value="value"
+      v-model="gender"
+      :options="userStore.userOption.genderOpts"
+    />
+    <VueDatePicker
+      utc
+      autoApply
+      v-model="birthDate"
+      :locale="'th'"
+      :enableTimePicker="false"
+      :disabled="readonly"
+      class="col-3"
+    >
+      <template #year="{ value }">
+        {{ value + 543 }}
+      </template>
+      <template #trigger>
+        <q-input
+          label="วันเดือนปีเกิด"
+          :dense="dense"
+          :outlined="outlined"
+          :readonly="readonly"
+          :model-value="birthDate ? dateFormat(birthDate) : ''"
+        >
+          <template v-slot:prepend>
+            <q-icon
+              size="xs"
+              name="mdi-calendar-blank-outline"
+              class="cursor-pointer"
+              color="positive"
+            />
+          </template>
+          <template v-slot:append>
+            <q-icon
+              v-if="birthDate && !readonly"
+              name="mdi-close"
+              class="cursor-pointer"
+              size="xs"
+              @click="birthDate = undefined"
+            />
+          </template>
+        </q-input>
+      </template>
+    </VueDatePicker>
+    <q-input
+      :dense="dense"
+      :outlined="outlined"
+      readonly
+      label="อายุ"
+      class="col-3"
+      :model-value="birthDate ? userStore.calculateAge(birthDate) : ''"
+    />
+  </div>
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mb-md"
+    style="padding-block: 0.5px; margin-top: 32px"
+  />
+</template>