ทะเบียนประวัติ: ข้อมูลส่วนตัว (เพิ่ม ยศ แก้ q-select)

src/modules/04_registryNew/components/detail/PersonalInformation/01_Profile.vue

@@ -25,16 +25,7 @@ const {
   messageError,
   dialogConfirm,
 } = mixin;
-const {
-  calculateAge,
-  fetchPerson,
-  filterSelector,
-  // getGender,
-  // getRelationship,
-  // getReligion,
-  // getBloodGroup,
-  // getPersonOp,
-} = store;
+const { calculateAge, fetchPerson, filterSelector } = store;
 const profileId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
@@ -47,31 +38,8 @@ const filterHistory = ref<string>("");
 const modalHistory = ref<boolean>(false);
 
 const id = ref<string>("");
-const age = ref<string>("");
-// หลังบ้านไม่มีข้อมูล สัญชาติ
-const nationality = ref<string>("");
-const formData = reactive<RequestObject>({
-  citizenId: "",
-  prefix: "",
-  firstName: "",
-  lastName: "",
-  birthDate: null,
-  genderId: "",
-  relationshipId: "",
-  // nationality: "",
-  ethnicity: "",
-  religionId: "",
-  bloodGroupId: "",
-  phone: "",
-  posTypeId: "",
-  posLevelId: "",
-  telephoneNumber: null,
-  dateRetire: null,
-  isProbation: false,
-  keycloak: "",
-  email: null,
-  position: "",
-});
+const age = ref<string | null>("");
+const formData = reactive<RequestObject>(store.defaultProfile);
 
 const dataLabel = {
   citizenId: "เลขบัตรประจำตัวประชาชน",
@@ -87,6 +55,7 @@ const dataLabel = {
   phone: "เบอร์โทร",
 
   prefix: "คำนำหน้าชื่อ",
+  rank: "ยศ",
   firstName: "ชื่อ",
   lastName: "นามสกุล",
 };
@@ -114,6 +83,17 @@ const columnsHistory = ref<QTableColumn[]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "rank",
+    align: "left",
+    label: "ยศ",
+    sortable: true,
+    field: "rank",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
   {
     name: "firstName",
     align: "left",
@@ -153,7 +133,7 @@ const columnsHistory = ref<QTableColumn[]>([
     align: "left",
     label: "เพศ",
     sortable: true,
-    field: (v) => (v.gender ? v.gender.name : "-"),
+    field: "gender",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -164,7 +144,7 @@ const columnsHistory = ref<QTableColumn[]>([
     align: "left",
     label: "สถานภาพ",
     sortable: true,
-    field: (v) => (v.relationship ? v.relationship.name : "-"),
+    field: "relationship",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -175,7 +155,7 @@ const columnsHistory = ref<QTableColumn[]>([
     align: "left",
     label: "หมู่เลือด",
     sortable: true,
-    field: (v) => (v.bloodGroup ? v.bloodGroup.name : "-"),
+    field: "bloodGroup",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -208,7 +188,7 @@ const columnsHistory = ref<QTableColumn[]>([
     align: "left",
     label: "ศาสนา",
     sortable: true,
-    field: (v) => (v.religion ? v.religion.name : "-"),
+    field: "religion",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -253,6 +233,7 @@ const columnsHistory = ref<QTableColumn[]>([
 const visibleColumnsHistory = ref<String[]>([
   "citizenId",
   "prefix",
+  "rank",
   "firstName",
   "lastName",
   "birthDate",
@@ -291,6 +272,7 @@ async function editData() {
   await http
     .put(config.API.profileNewProfileById(id.value), {
       ...formData,
+      dateRetire: store.retireDate,
     })
     .then((res) => {
       success($q, "บันทึกข้อมูลสำเร็จ");
@@ -312,15 +294,16 @@ function onClickOpenDialog() {
   age.value = calculateAge(informaData.value.birthDate);
   formData.citizenId = informaData.value.citizenId;
   formData.prefix = informaData.value.prefix;
+  formData.rank = informaData.value.rank;
   formData.firstName = informaData.value.firstName;
   formData.lastName = informaData.value.lastName;
   formData.birthDate = informaData.value.birthDate;
-  formData.genderId = informaData.value.genderId;
-  formData.relationshipId = informaData.value.relationshipId;
-  // formData.nationality = informaData.value.nationality;
+  formData.gender = informaData.value.gender;
+  formData.relationship = informaData.value.relationship;
+  formData.nationality = informaData.value.nationality;
   formData.ethnicity = informaData.value.ethnicity;
-  formData.religionId = informaData.value.religionId;
-  formData.bloodGroupId = informaData.value.bloodGroupId;
+  formData.religion = informaData.value.religion;
+  formData.bloodGroup = informaData.value.bloodGroup;
   formData.phone = informaData.value.phone;
 }
 
@@ -414,7 +397,9 @@ onMounted(async () => {
           </div>
           <div class="q-py-xs">
             {{
-              `${informaData.prefix} ${informaData.firstName} ${informaData.lastName}`
+              `${informaData.rank ? informaData.rank : informaData.prefix} ${
+                informaData.firstName
+              } ${informaData.lastName}`
             }}
           </div>
           <div class="q-py-xs">
@@ -424,10 +409,10 @@ onMounted(async () => {
             {{ age ? age : "-" }}
           </div>
           <div class="q-py-xs">
-            {{ informaData.gender ? informaData.gender.name : "-" }}
+            {{ informaData.gender ? informaData.gender : "-" }}
           </div>
           <div class="q-py-xs">
-            {{ informaData.relationship ? informaData.relationship.name : "-" }}
+            {{ informaData.relationship ? informaData.relationship : "-" }}
           </div>
         </div>
       </div>
@@ -451,10 +436,10 @@ onMounted(async () => {
             {{ informaData.ethnicity ? informaData.ethnicity : "-" }}
           </div>
           <div class="q-py-xs">
-            {{ informaData.religion ? informaData.religion.name : "-" }}
+            {{ informaData.religion ? informaData.religion : "-" }}
           </div>
           <div class="q-py-xs">
-            {{ informaData.bloodGroup ? informaData.bloodGroup.name : "-" }}
+            {{ informaData.bloodGroup ? informaData.bloodGroup : "-" }}
           </div>
           <div class="q-py-xs">
             {{ informaData.phone ? informaData.phone : "-" }}
@@ -505,7 +490,7 @@ onMounted(async () => {
                 hide-bottom-space
                 input-debounce="0"
                 option-label="name"
-                option-value="id"
+                option-value="name"
                 v-model="formData.prefix"
                 class="inputgreen"
                 :options="store.Ops.prefixOps"
@@ -516,6 +501,28 @@ onMounted(async () => {
               )"
               />
             </div>
+            <div class="col-xs-6 col-sm-6 col-md-6">
+              <q-select
+                dense
+                outlined
+                clearable
+                use-input
+                lazy-rules
+                emit-value
+                map-options
+                hide-bottom-space
+                input-debounce="0"
+                option-label="name"
+                option-value="name"
+                v-model="formData.rank"
+                class="inputgreen"
+                :options="store.Ops.rankOps"
+                :label="dataLabel.rank"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'rankOps'
+              )"
+              />
+            </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-input
                 dense
@@ -601,6 +608,7 @@ onMounted(async () => {
               <q-select
                 dense
                 outlined
+                use-input
                 clearable
                 lazy-rules
                 emit-value
@@ -608,29 +616,36 @@ onMounted(async () => {
                 hide-bottom-space
                 input-debounce="0"
                 option-label="name"
-                option-value="id"
-                v-model="formData.genderId"
+                option-value="name"
+                v-model="formData.gender"
                 class="inputgreen"
                 :options="store.Ops.genderOps"
                 :label="dataLabel.gender"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'genderOps'
+              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-select
                 dense
                 outlined
+                use-input
                 clearable
                 lazy-rules
                 emit-value
                 map-options
                 hide-bottom-space
-                option-value="id"
+                option-value="name"
                 option-label="name"
                 input-debounce="0"
                 class="inputgreen"
-                v-model="formData.relationshipId"
+                v-model="formData.relationship"
                 :options="store.Ops.statusOps"
                 :label="dataLabel.relationship"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'statusOps'
+              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
@@ -640,7 +655,7 @@ onMounted(async () => {
                 lazy-rules
                 hide-bottom-space
                 class="inputgreen"
-                v-model="nationality"
+                v-model="formData.nationality"
                 :label="dataLabel.nationality"
               />
             </div>
@@ -659,36 +674,44 @@ onMounted(async () => {
               <q-select
                 dense
                 outlined
+                use-input
                 clearable
                 lazy-rules
                 emit-value
                 map-options
                 hide-bottom-space
-                option-value="id"
+                option-value="name"
                 option-label="name"
                 input-debounce="0"
-                v-model="formData.religionId"
+                v-model="formData.religion"
                 class="inputgreen"
                 :options="store.Ops.religionOps"
                 :label="dataLabel.religion"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'religionOps'
+              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">
               <q-select
                 dense
                 outlined
+                use-input
                 clearable
                 lazy-rules
                 emit-value
                 map-options
                 hide-bottom-space
-                option-value="id"
+                option-value="name"
                 option-label="name"
                 input-debounce="0"
-                v-model="formData.bloodGroupId"
+                v-model="formData.bloodGroup"
                 class="inputgreen"
                 :options="store.Ops.bloodOps"
                 :label="dataLabel.bloodGroup"
+                @filter="(inputValue: any,
+              doneFn: Function) => filterSelector(inputValue, doneFn, 'bloodOps'
+              )"
               />
             </div>
             <div class="col-xs-6 col-sm-6 col-md-6">