ทะเบียนประวัติ

src/api/registry/api.registry.ts

@@ -176,4 +176,6 @@ export default {
   //ข้อมูลครอบครับ
   profileFamily: (empType: string, type: string) =>
     `${registryNew}${empType}/family/${type}`,
+  profileFamilyHistory: (id: string, empType: string, type: string) =>
+    `${registryNew}${empType}/family/${type}/history/${id}`,
 };

src/modules/04_registryNew/components/detail/GovernmentInformation/01_Info.vue

@@ -2,7 +2,6 @@
 import { ref, reactive, watch, onMounted } from "vue";
 import { useCounterMixin } from "@/stores/mixin";
 import type {
-  MyObjectRef,
   RequestItemsHistoryObject,
   FormMain,
 } from "@/modules/04_registryNew/interface/index/government";
@@ -25,6 +24,7 @@ const {
   messageError,
   showLoader,
   hideLoader,
+  success,
 } = mixin;
 
 const profileId = ref<string>(route.params.id.toString());
@@ -70,24 +70,6 @@ const containDateRef = ref<object | null>(null);
 const workDateRef = ref<object | null>(null);
 const reasonSameDateRef = ref<object | null>(null);
 
-const objectRef: MyObjectRef = {
-  containDate: containDateRef,
-  workDate: workDateRef,
-  reasonSameDate: reasonSameDateRef,
-};
-
-const fieldLabels = {
-  ocId: "สังกัด",
-  positionId: "ตำแหน่ง",
-  numberId: "เลขที่ตำแหน่ง",
-  positionExecutive: "ตำแหน่งทางการบริหาร",
-  positionExecutiveSide: "ด้านทางการบริหาร",
-  positionLine: "สายงาน",
-  positionLevel: "ระดับ",
-  positionType: "ประเภท",
-  positionPathSide: "ด้าน/สาขา",
-};
-
 const visibleColumnsHistory = ref<String[]>([
   "oc",
   "position",
@@ -317,7 +299,6 @@ const columnsHistory = ref<QTableProps["columns"]>([
 /** เปิด dialog */
 function openDialogEdit() {
   modalEdit.value = true;
-
   containDate.value = formMain.containDate ? formMain.containDate : null;
   workDate.value = formMain.workDate ? formMain.workDate : null;
   reasonSameDate.value = formMain.reasonSameDate
@@ -338,23 +319,6 @@ function closeDialog() {
   reasonSameDate.value = null;
 }
 
-/** validate check*/
-function validateForm() {
-  const hasError = [];
-  for (const key in objectRef) {
-    if (Object.prototype.hasOwnProperty.call(objectRef, key)) {
-      const property = objectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    onSubmit();
-  }
-}
-
 function onSubmit() {
   dialogConfirm($q, () => {
     showLoader();
@@ -371,9 +335,10 @@ function onSubmit() {
               : reasonSameDate.value,
         }
       )
-      .then((res) => {
+      .then(() => {
-        closeDialog();
         getData();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        closeDialog();
       })
       .catch((e) => {
         messageError($q, e);
@@ -381,8 +346,6 @@ function onSubmit() {
       .finally(() => {
         hideLoader();
       });
-
-    closeDialog();
   });
 }
 
@@ -393,15 +356,15 @@ function getData() {
     .get(config.API.profileNewGovernmentById(profileId.value, empType.value))
     .then((res) => {
       const data = res.data.result;
-      formMain.ocId = data.org; //สังกัด
+      formMain.ocId = data.org ?? "-"; //สังกัด
-      formMain.positionId = data.position; //ตำแหน่ง
+      formMain.positionId = data.position ?? "-"; //ตำแหน่ง
-      formMain.positionLine = data.positionField; //สายงาน
+      formMain.positionLine = data.positionField ?? "-"; //สายงาน
-      formMain.positionLevel = data.posLevel; //ระดับ
+      formMain.positionLevel = data.posLevel ?? "-"; //ระดับ
-      formMain.numberId = data.posMasterNo; //เลขที่ตำแหน่ง
+      formMain.numberId = data.posMasterNo ?? "-"; //เลขที่ตำแหน่ง
-      formMain.positionType = data.posType; //ประเภท
+      formMain.positionType = data.posType ?? "-"; //ประเภท
-      formMain.positionExecutive = data.posExecutive; //ตำแหน่งทางการ บริหาร
+      formMain.positionExecutive = data.posExecutive ?? "-"; //ตำแหน่งทางการ บริหาร
-      formMain.positionPathSide = data.positionArea; //ด้านสาขา
+      formMain.positionPathSide = data.positionArea ?? "-"; //ด้านสาขา
-      formMain.positionExecutiveSide = data.positionExecutiveField; //ด้านทางการบริหาร
+      formMain.positionExecutiveSide = data.positionExecutiveField ?? "-"; //ด้านทางการบริหาร
 
       formMain.containDate = data.dateAppoint;
       formMain.workDate = data.dateStart;
@@ -463,16 +426,6 @@ function getDataHistory() {
     });
 }
 
-// watch(
-//   () => modalHistory.value,
-//   (isOpen) => {
-//     if (isOpen === true) {
-//       filterKeyword.value = "";
-//       getDataHistory();
-//     }
-//   }
-// );
-
 onMounted(() => {
   getData();
 });
@@ -505,34 +458,72 @@ onMounted(() => {
   <q-card bordered class="bg-grey-1 q-pa-md q-mt-sm">
     <div class="row q-col-gutter-md">
       <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-        <div
+        <div class="row items-center">
-          class="row"
+          <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
-          v-for="(field, index) in Object.keys(fieldLabels).slice(0, 5)"
+            <div>สังกัด</div>
-          :key="index"
+          </div>
-        >
+          <div class="col-12 col-sm-12 col-md-7">{{ formMain.ocId }}</div>
-          <div class="col-12 col-sm-12 col-md-5">
+        </div>
-            <span class="text-grey-6 text-weight-medium">{{
+        <div class="row items-center">
-              fieldLabels[field as keyof typeof fieldLabels]
+          <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
-            }}</span>
+            <div>ตำแหน่ง</div>
+          </div>
+          <div class="col-12 col-sm-12 col-md-7">{{ formMain.positionId }}</div>
+        </div>
+        <div class="row items-center">
+          <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+            <div>เลขที่ตำแหน่ง</div>
+          </div>
+          <div class="col-12 col-sm-12 col-md-7">{{ formMain.numberId }}</div>
+        </div>
+        <div class="row items-center" v-if="empType === ''">
+          <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+            <div>ตำแหน่งทางการบริหาร</div>
           </div>
           <div class="col-12 col-sm-12 col-md-7">
-            <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
+            {{ formMain.positionExecutive }}
+          </div>
+        </div>
+        <div class="row items-center" v-if="empType === ''">
+          <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+            <div>ด้านทางการบริหาร</div>
+          </div>
+          <div class="col-12 col-sm-12 col-md-7">
+            {{ formMain.positionExecutiveSide }}
           </div>
         </div>
       </div>
       <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-        <div
+        <div class="row items-center" v-if="empType === ''">
-          class="row"
+          <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
-          v-for="(field, index) in Object.keys(fieldLabels).slice(5, 9)"
+            <div>สายงาน</div>
-          :key="index"
-        >
-          <div class="col-12 col-sm-12 col-md-5">
-            <span class="text-grey-6 text-weight-medium">{{
-              fieldLabels[field as keyof typeof fieldLabels]
-            }}</span>
           </div>
           <div class="col-12 col-sm-12 col-md-7">
-            <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
+            {{ formMain.positionLine }}
+          </div>
+        </div>
+        <div class="row items-center">
+          <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+            <div>{{ empType === "" ? "ประเภทตำแหน่ง" : "กลุ่มงาน" }}</div>
+          </div>
+          <div class="col-12 col-sm-12 col-md-7">
+            {{ formMain.positionType }}
+          </div>
+        </div>
+        <div class="row items-center">
+          <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+            <div>{{ empType === "" ? "ระดับตำแหน่ง" : "ระดับชั้นงาน" }}</div>
+          </div>
+          <div class="col-12 col-sm-12 col-md-7">
+            {{ formMain.positionLevel }}
+          </div>
+        </div>
+        <div class="row items-center" v-if="empType === ''">
+          <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+            <div>ด้าน/สาขา</div>
+          </div>
+          <div class="col-12 col-sm-12 col-md-7">
+            {{ formMain.positionPathSide }}
           </div>
         </div>
       </div>
@@ -665,7 +656,7 @@ onMounted(() => {
   <!-- dialog edit -->
   <q-dialog v-model="modalEdit" persistent>
     <q-card>
-      <form @submit.prevent="validateForm">
+      <q-form @submit.prevent greedy @validation-success="onSubmit">
         <DialogHeader tittle="แก้ไขข้อมูลราชการ" :close="closeDialog" />
         <q-separator color="grey-4" />
 
@@ -785,7 +776,7 @@ onMounted(() => {
             <q-tooltip>บันทึกข้อมูล</q-tooltip>
           </q-btn>
         </q-card-actions>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 

src/modules/04_registryNew/components/detail/PersonalInformation/04_FamilyNew.vue

@@ -37,6 +37,7 @@ const visibleColumns = ref<String[]>([
   "lastName",
   "job",
   "isLive",
+  "lastNameOld",
 ]);
 const columns = ref<QTableProps["columns"]>([
   {
@@ -76,6 +77,15 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "lastNameOld",
+    align: "left",
+    label: "นามสกุลเดิม",
+    sortable: true,
+    field: "lastNameOld",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
   {
     name: "job",
     align: "left",
@@ -93,37 +103,37 @@ const columns = ref<QTableProps["columns"]>([
     field: "isLive",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (val) => convertisLive(val),
+    format: (val) => (val ? "มีชีวิต" : "ถึงแก่กรรม"),
   },
 ]);
 const rows = ref<any[]>([]);
 
 /** ข้อมูล*/
-const fatherData = ref({
+const fatherData = reactive<any>({
-  isLive: 1,
+  isLive: null,
-  citizenId: "1231231231231",
+  citizenId: "",
-  prefix: "นาย",
+  prefix: "",
-  firstName: "ตรีชาไทย",
+  firstName: "",
-  lastName: "หวังดี",
+  lastName: "",
-  job: "จอมพล",
+  job: "",
 });
-const motherData = ref({
+const motherData = reactive<any>({
-  isLive: 0,
+  isLive: null,
-  citizenId: "1572476458930",
+  citizenId: "",
-  prefix: "นาง",
+  prefix: "",
-  firstName: "บุษดี",
+  firstName: "",
-  lastName: "มาดี",
+  lastName: "",
-  job: "พยาบาล",
+  job: "",
 });
-const coupleData = ref<any>({
+const coupleData = reactive<any>({
-  isLive: 1,
+  isLive: null,
-  citizenId: "1231231231231",
+  citizenId: "",
-  prefix: "นาย",
+  prefix: "",
-  firstName: "ตรีชาไทย",
+  firstName: "",
-  lastName: "หวังดี",
+  lastName: "",
-  job: "จอมพล",
+  job: "",
-  lastNameOld: "หวังดี",
+  lastNameOld: "",
-  statusMarital: "แต่งงานแล้ว",
+  statusMarital: "",
 });
 const childData = ref<any[]>([{}]);
 
@@ -134,6 +144,7 @@ const filterHistory = ref<string>("");
 const titleForm = ref<string>("");
 const typeForm = ref<string>("");
 const isEdit = ref<boolean>(false);
+const childernId = ref<string>("");
 
 const optionRelationshipMain = ref<DataOption[]>([]);
 const optionRelationship = ref<DataOption[]>([]);
@@ -152,9 +163,20 @@ const fromData = reactive({
 function fetchDataFather() {
   showLoader();
   http
-    .get(config.API.profileFamily(empType.value, "father"))
+    .get(
+      config.API.profileFamily(empType.value, "father") + `/${profileId.value}`
+    )
     .then((res) => {
-      console.log(res);
+      const data = res.data.result;
+
+      if (data) {
+        fatherData.isLive = data.fatherLive;
+        fatherData.citizenId = data.fatherCitizenId;
+        fatherData.prefix = data.fatherPrefix;
+        fatherData.firstName = data.fatherFirstName;
+        fatherData.lastName = data.fatherLastName;
+        fatherData.job = data.fatherCareer;
+      }
     })
     .catch((err) => {
       messageError($q, err);
@@ -166,9 +188,19 @@ function fetchDataFather() {
 function fetchDataMother() {
   showLoader();
   http
-    .get(config.API.profileFamily(empType.value, "mother "))
+    .get(
+      config.API.profileFamily(empType.value, "mother") + `/${profileId.value}`
+    )
     .then((res) => {
-      console.log(res);
+      const data = res.data.result;
+      if (data) {
+        motherData.isLive = data.motherLive;
+        motherData.citizenId = data.motherCitizenId;
+        motherData.prefix = data.motherPrefix;
+        motherData.firstName = data.motherFirstName;
+        motherData.lastName = data.motherLastName;
+        motherData.job = data.motherCareer;
+      }
     })
     .catch((err) => {
       messageError($q, err);
@@ -180,9 +212,21 @@ function fetchDataMother() {
 function fetchDataCouple() {
   showLoader();
   http
-    .get(config.API.profileFamily(empType.value, "couple"))
+    .get(
+      config.API.profileFamily(empType.value, "couple") + `/${profileId.value}`
+    )
     .then((res) => {
-      console.log(res);
+      const data = res.data.result;
+      if (data) {
+        coupleData.isLive = data.coupleLive;
+        coupleData.citizenId = data.coupleCitizenId;
+        coupleData.prefix = data.couplePrefix;
+        coupleData.firstName = data.coupleFirstName;
+        coupleData.lastName = data.coupleLastName;
+        coupleData.job = data.coupleCareer;
+        coupleData.lastNameOld = data.coupleLastNameOld;
+        coupleData.statusMarital = data.relationship;
+      }
     })
     .catch((err) => {
       messageError($q, err);
@@ -194,9 +238,13 @@ function fetchDataCouple() {
 function fetchDataChildren() {
   showLoader();
   http
-    .get(config.API.profileFamily(empType.value, "children"))
+    .get(
+      config.API.profileFamily(empType.value, "children") +
+        `/${profileId.value}`
+    )
     .then((res) => {
-      console.log(res);
+      const data = res.data.result;
+      childData.value = data;
     })
     .catch((err) => {
       messageError($q, err);
@@ -207,14 +255,45 @@ function fetchDataChildren() {
 }
 
 function onSubmit(type: string) {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
-    if (type === "father") {
+    showLoader();
-    } else if (type === "mother") {
+
-    } else if (type === "couple") {
+    const formBody = {
-    } else if (type === "child") {
+      profileId:
-      submitChildren();
+        !isEdit.value && empType.value === "" ? profileId.value : undefined,
+      profileEmployeeId:
+        !isEdit.value && empType.value !== "" ? profileId.value : undefined,
+      [`${type}CitizenId`]: fromData.citizenId,
+      [`${type}Prefix`]: fromData.prefix,
+      [`${type}FirstName`]: fromData.firstName,
+      [`${type}LastName`]: fromData.lastName,
+      [`${type}Career`]: fromData.job,
+      [`${type}Live`]: fromData.isLive === 1 ? true : false,
+      relationship: type === "couple" ? fromData.statusMarital : undefined,
+      coupleLastNameOld: type === "couple" ? fromData.lastNameOld : undefined,
+    };
+
+    const url =
+      isEdit.value && type === "children"
+        ? config.API.profileFamily(empType.value, type) + `/${childernId.value}`
+        : config.API.profileFamily(empType.value, type);
+    const method = isEdit.value && type === "children" ? "patch" : "post";
+    try {
+      await http[method](url, formBody);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      type === "father"
+        ? fetchDataFather()
+        : type === "mother"
+        ? fetchDataMother()
+        : type === "couple"
+        ? fetchDataCouple()
+        : fetchDataChildren();
+      closeDialog();
+    } catch (e) {
+      messageError($q, e);
+    } finally {
+      hideLoader();
     }
-    closeDialog();
   });
 }
 
@@ -239,43 +318,47 @@ function onOpenDialogForm(
   modal.value = true;
   typeForm.value = type;
   isEdit.value = isStatusEdit;
+  console.log(data);
 
   if (type === "father") {
     titleForm.value = "บิดา";
-    if (isStatusEdit) {
+
-      fromData.isLive = fatherData.value.isLive;
+    fromData.isLive = fatherData.isLive ? 1 : 0;
-      fromData.citizenId = fatherData.value.citizenId;
+    fromData.citizenId = fatherData.citizenId;
-      fromData.prefix = fatherData.value.prefix;
+    fromData.prefix = fatherData.prefix;
-      fromData.firstName = fatherData.value.firstName;
+    fromData.firstName = fatherData.firstName;
-      fromData.lastName = fatherData.value.lastName;
+    fromData.lastName = fatherData.lastName;
-      fromData.job = fatherData.value.job;
+    fromData.job = fatherData.job;
-    }
   } else if (type === "mother") {
     titleForm.value = "มารดา";
-    if (isStatusEdit) {
+
-      fromData.isLive = motherData.value.isLive;
+    fromData.isLive = motherData.isLive ? 1 : 0;
-      fromData.citizenId = motherData.value.citizenId;
+    fromData.citizenId = motherData.citizenId;
-      fromData.prefix = motherData.value.prefix;
+    fromData.prefix = motherData.prefix;
-      fromData.firstName = motherData.value.firstName;
+    fromData.firstName = motherData.firstName;
-      fromData.lastName = motherData.value.lastName;
+    fromData.lastName = motherData.lastName;
-      fromData.job = motherData.value.job;
+    fromData.job = motherData.job;
-    }
   } else if (type === "couple") {
     titleForm.value = "คู่สมรส";
-  } else if (type === "child") {
+  } else if (type === "children") {
     titleForm.value = "บุตร";
-    fromData.isLive = data.isLive;
+    if (isStatusEdit) {
-    fromData.citizenId = data.citizenId;
+      childernId.value = data.id;
-    fromData.prefix = data.prefix;
+      fromData.isLive = data.childrenLive ? 1 : 0;
-    fromData.firstName = data.firstName;
+      fromData.citizenId = data.childrenCitizenId;
-    fromData.lastName = data.lastName;
+      fromData.prefix = data.childrenPrefix;
-    fromData.job = data.job;
+      fromData.firstName = data.childrenFirstName;
+      fromData.lastName = data.childrenLastName;
+      fromData.job = data.childrenCareer;
+    }
   }
 }
 
-function onOpenDialogHistory(type: string) {
+function onOpenDialogHistory(type: string, id: string = "") {
   modalHistory.value = true;
-  console.log(type);
+  typeForm.value = type;
+  const historyId = type === "children" ? id : profileId.value;
+  fetchHistory(historyId, type);
 }
 
 function fetchDataRelationship() {
@@ -305,42 +388,30 @@ const filterSelectorRelation = (val: any, update: Function) => {
   });
 };
 
-function convertisLive(status: number) {
+function fetchHistory(id: string, type: string) {
-  switch (status) {
+  hideLoader();
-    case 1:
-      return "ถึงแก่กรรม";
-    case 2:
-      return "มีชีวิต";
-
-    default:
-      break;
-  }
-}
-
-function submitChildren() {
-  const body = {
-    profileId: empType.value === "" ? profileId.value : undefined,
-    profileEmployeeId: empType.value !== "" ? profileId.value : undefined,
-    childrenCareer: fromData.job,
-    childrenFirstName: fromData.firstName,
-    childrenLastName: fromData.lastName,
-    childrenPrefix: fromData.prefix,
-    childrenLive: fromData.isLive === 1 ? true : false,
-    childrenCitizenId: fromData.citizenId,
-  };
-
   http
-    .post(config.API.profileFamily(empType.value, "children"), body)
+    .get(config.API.profileFamilyHistory(id, empType.value, type))
-    .then(() => {
+    .then((res) => {
-      success($q, "บันทึกข้อมูลสำเร็จ");
+      const data = res.data.result;
+      rows.value = data.map((e: any) => ({
+        citizenId: e[`${type}CitizenId`],
+        prefix: e[`${type}Prefix`],
+        firstName: e[`${type}FirstName`],
+        lastName: e[`${type}LastName`],
+        job: e[`${type}Career`],
+        isLive: e[`${type}Live`],
+        lastNameOld: type === "couple" ? e.coupleLastNameOld : undefined,
+      }));
     })
     .catch((err) => {
       messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
     });
 }
 
-function fetchHistory() {}
-
 onMounted(() => {
   fetchDataFather();
   fetchDataMother();
@@ -366,7 +437,7 @@ onMounted(() => {
             icon="mdi-pencil-outline"
             size="14px"
             dense
-            @click="onOpenDialogForm('father', true)"
+            @click="onOpenDialogForm('father')"
           >
             <q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
           >
@@ -415,8 +486,13 @@ onMounted(() => {
             สถานภาพการมีชีวิต
           </div>
           <div class="col-10">
-            <div v-if="fatherData.isLive">มีชีวิตอยู่</div>
+            {{
-            <div v-else>ถึงแก่กรรม</div>
+              fatherData.isLive === true
+                ? "มีชีวิตอยู่"
+                : fatherData.isLive === false
+                ? "ถึงแก่กรรม"
+                : "-"
+            }}
           </div>
         </div>
       </q-card>
@@ -436,7 +512,7 @@ onMounted(() => {
             icon="mdi-pencil-outline"
             size="14px"
             dense
-            @click="onOpenDialogForm('mother', true)"
+            @click="onOpenDialogForm('mother')"
           >
             <q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
           >
@@ -468,7 +544,10 @@ onMounted(() => {
           <div class="col-6">
             {{
               motherData.prefix
-                ? motherData.prefix + motherData.firstName + " " + motherData.lastName
+                ? motherData.prefix +
+                  motherData.firstName +
+                  " " +
+                  motherData.lastName
                 : "-"
             }}
           </div>
@@ -482,8 +561,13 @@ onMounted(() => {
             สถานภาพการมีชีวิต
           </div>
           <div class="col-10">
-            <div v-if="motherData.isLive">มีชีวิตอยู่</div>
+            {{
-            <div v-else>ถึงแก่กรรม</div>
+              motherData.isLive === true
+                ? "มีชีวิตอยู่"
+                : motherData.isLive === false
+                ? "ถึงแก่กรรม"
+                : "-"
+            }}
           </div>
         </div>
       </q-card>
@@ -524,7 +608,11 @@ onMounted(() => {
         </div>
       </q-toolbar>
 
-      <q-card bordered class="bg-grey-1 q-pb-md">
+      <q-card
+        bordered
+        class="bg-grey-1 q-pb-md"
+        v-if="coupleData.statusMarital"
+      >
         <div class="col-12 row q-py-sm q-px-md bg-grey-2 items-center">
           <div class="text-weight-medium q-pr-md">คู่สมรส</div>
         </div>
@@ -535,7 +623,7 @@ onMounted(() => {
               <div>สถานภาพการสมรส</div>
             </div>
             <div class="col-10">
-              {{ coupleData.statusMarital }}
+              {{ coupleData.statusMarital ?? "-" }}
             </div>
           </div>
           <div class="row items-center">
@@ -543,7 +631,7 @@ onMounted(() => {
               <div>เลขบัตรประจำตัวประชาชน</div>
             </div>
             <div class="col-10">
-              {{ coupleData.citizenId }}
+              {{ coupleData.citizenId ?? "-" }}
             </div>
           </div>
           <div class="row items-center">
@@ -560,7 +648,7 @@ onMounted(() => {
             </div>
             <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
             <div class="col">
-              {{ coupleData.job }}
+              {{ coupleData.job ?? "-" }}
             </div>
           </div>
           <div class="row items-center">
@@ -568,8 +656,13 @@ onMounted(() => {
               สถานภาพการมีชีวิต
             </div>
             <div class="col">
-              <div v-if="coupleData.isLive">มีชีวิตอยู่</div>
+              {{
-              <div v-else>ถึงแก่กรรม</div>
+                coupleData.isLive === true
+                  ? "มีชีวิตอยู่"
+                  : coupleData.isLive === false
+                  ? "ถึงแก่กรรม"
+                  : "-"
+              }}
             </div>
           </div>
         </div>
@@ -588,7 +681,7 @@ onMounted(() => {
             color="primary"
             icon="add"
             size="14px"
-            @click="onOpenDialogForm('child')"
+            @click="onOpenDialogForm('children')"
           >
             <q-tooltip>เพิ่มบุตร</q-tooltip></q-btn
           >
@@ -597,7 +690,7 @@ onMounted(() => {
       </q-toolbar>
 
       <div v-for="(item, index) in childData" :key="index">
-        <q-card bordered class="bg-grey-1 q-pb-md">
+        <q-card bordered class="bg-grey-1 q-pb-md q-mb-sm">
           <div class="col-12 row q-py-sm q-px-md bg-grey-2 items-center">
             <div class="text-weight-medium q-pr-md">
               บุตรคนที่ : {{ index + 1 }}
@@ -611,7 +704,7 @@ onMounted(() => {
                 icon="mdi-pencil-outline"
                 size="14px"
                 dense
-                @click="onOpenDialogForm('child', true, item)"
+                @click="onOpenDialogForm('children', true, item)"
               >
                 <q-tooltip>แก้ไขข้อมูล</q-tooltip></q-btn
               >
@@ -622,7 +715,7 @@ onMounted(() => {
                 color="info"
                 icon="mdi-history"
                 size="14px"
-                @click="onOpenDialogHistory('child')"
+                @click="onOpenDialogHistory('children', item.id)"
               >
                 <q-tooltip>ประวัติการแก้ไขข้อมูลครอบครัว</q-tooltip></q-btn
               >
@@ -635,7 +728,7 @@ onMounted(() => {
                 <div>เลขบัตรประจำตัวประชาชน</div>
               </div>
               <div class="col-10">
-                {{ item.citizenId }}
+                {{ item.childrenCitizenId }}
               </div>
             </div>
             <div class="row items-center">
@@ -644,14 +737,17 @@ onMounted(() => {
               </div>
               <div class="col-6">
                 {{
-                  item.prefix
+                  item.childrenPrefix
-                    ? item.prefix + item.firstName + " " + item.lastName
+                    ? item.childrenPrefix +
+                      item.childrenFirstName +
+                      " " +
+                      item.childrenLastName
                     : "-"
                 }}
               </div>
               <div class="col-1 text-grey-6 text-weight-medium">อาชีพ</div>
               <div class="col">
-                {{ item.job }}
+                {{ item.childrenCareer }}
               </div>
             </div>
             <div class="row items-center">
@@ -659,8 +755,13 @@ onMounted(() => {
                 สถานภาพการมีชีวิต
               </div>
               <div class="col">
-                <div v-if="item.isLive">มีชีวิตอยู่</div>
+                {{
-                <div v-else>ถึงแก่กรรม</div>
+                  item.childrenLive === true
+                    ? "มีชีวิตอยู่"
+                    : item.childrenLive === false
+                    ? "ถึงแก่กรรม"
+                    : "-"
+                }}
               </div>
             </div>
           </div>
@@ -680,13 +781,6 @@ onMounted(() => {
         />
         <q-separator color="grey-4" />
         <q-card-section>
-          <!-- <div class="col-12 row q-pb-sm">
-            <div
-              class="q-mr-md q-pl-md text-weight-bold text-primary text-subtitle1"
-            >
-              {{ titleForm }}
-            </div>
-          </div> -->
           <div class="q-col-gutter-sm">
             <div class="row col" v-if="typeForm === 'couple'">
               <q-select
@@ -861,7 +955,18 @@ onMounted(() => {
 
   <q-dialog v-model="modalHistory" class="dialog" persistent>
     <q-card style="min-width: 80%">
-      <DialogHeader tittle="ประวัติแก้ไขข้อมูลครอบครัว" :close="closeDialog" />
+      <DialogHeader
+        :tittle="`ประวัติแก้ไขข้อมูล${
+          typeForm === 'father'
+            ? 'บิดา'
+            : typeForm === 'mother'
+            ? 'มารดา'
+            : typeForm === 'couple'
+            ? 'คู่สมรส'
+            : 'บุตร'
+        }`"
+        :close="closeDialog"
+      />
       <q-separator color="grey-4" />
       <q-card-section>
         <div class="row q-gutter-sm q-mb-sm">
@@ -899,7 +1004,11 @@ onMounted(() => {
             :display-value="$q.lang.table.columns"
             emit-value
             map-options
-            :options="columns"
+            :options="
+              typeForm === 'couple'
+                ? columns
+                : columns?.filter((e) => e.name !== 'lastNameOld')
+            "
             option-value="name"
             options-cover
             style="min-width: 150px"
@@ -910,7 +1019,11 @@ onMounted(() => {
           flat
           bordered
           dense
-          :columns="columns"
+          :columns="
+            typeForm === 'couple'
+              ? columns
+              : columns?.filter((e) => e.name !== 'lastNameOld')
+          "
           :rows="rows"
           :paging="true"
           :rows-per-page-options="[10, 25, 50, 100]"

src/modules/04_registryNew/components/detail/PersonalInformation/05_Education.vue

@@ -653,6 +653,8 @@ async function addData() {
 }
 
 function editData(idData: string) {
+  console.log(educationData);
+
   http
     .patch(config.API.profileNewEducationByEducationId(idData, empType.value), {
       ...educationData,
@@ -660,6 +662,8 @@ function editData(idData: string) {
       startYear: undefined,
       endYear: undefined,
       isDate: isDate.value === "false" ? false : true,
+      durationYear:
+        educationData.durationYear === "" ? null : educationData.durationYear,
     })
     .then(() => {
       fetchData(id.value);
@@ -797,7 +801,7 @@ onMounted(async () => {
       <q-tr :props="props" class="cursor-pointer">
         <q-td v-for="col in props.cols" :key="col.id">
           <div>
-            {{ col.value === "" ? "-" : col.value }}
+            {{ col.value === ""|| col.value === null ? "-" : col.value }}
           </div>
         </q-td>
         <q-td auto-width>

src/modules/04_registryNew/components/detail/Salary/01_PositionSalary.vue

@@ -143,7 +143,6 @@ const formFilter = reactive({
   pageSize: 10,
   keyword: "",
 });
-const maxPage = ref<number>(1);
 
 const pagination = ref({
   page: 1,
@@ -176,11 +175,17 @@ const salaryId = ref<string>("");
 const dataLevel = ref<any[]>([]);
 
 const posNoOptions = ref<DataOption2[]>(store.optionTemplatePos);
-const positionLineOptions = ref<DataOption2[]>(store.optionTemplatePos);
+
 const posTypeOptions = ref<DataOption[]>([]);
 const posTypeOptionsMain = ref<DataOption[]>([]);
 const posLevelOption = ref<DataOption[]>([]);
 const posLevelOptionMain = ref<DataOption[]>([]);
+const positionFielOptiond = ref<DataOption[]>([]);
+const positionFielOptiondMain = ref<DataOption[]>([]);
+const positionAreaOptiond = ref<DataOption[]>([]);
+const positionAreaOptiondMain = ref<DataOption[]>([]);
+const posExecutiveOption = ref<DataOption[]>([]);
+const posExecutiveOptionMain = ref<DataOption[]>([]);
 
 const docOption = ref<DataOption2[]>(store.optionTemplateDoc);
 
@@ -219,18 +224,26 @@ async function updateSelectType(val: string, status: boolean = false) {
   const listLevel = await dataLevel.value.find(
     (e: any) => e.posTypeName === val
   );
+
   if (listLevel) {
     posLevelOptionMain.value = listLevel.posLevels.map((e: any) => ({
       id: e.id,
-      name: e.posLevelName,
+      name: e.posLevelName.toString(),
     }));
-    posLevelOption.value = posLevelOptionMain.value;
+
     formDataSalary.positionLevel = !status ? "" : formDataSalary.positionLevel;
   }
 }
 
 async function onClickOpenDialog(statusEdit: boolean = false, data: any = []) {
-  dataLevel.value.length === 0 && (await fetchType());
+  if (empType.value === "") {
+    dataLevel.value.length === 0 && fetchType();
+    fetchDataOption();
+    fetchDataOptionExecutive();
+  } else {
+    fetchOptionGroup();
+  }
+
   setTimeout(async () => {
     statusEdit && (await updateSelectType(data.positionType, true));
     isStatusEdit.value = statusEdit;
@@ -270,8 +283,8 @@ function filterSelector(val: any, update: Function, filtername: string) {
       break;
     case "positionLine":
       update(() => {
-        positionLineOptions.value = store.optionTemplatePos.filter(
+        positionFielOptiond.value = positionFielOptiondMain.value.filter(
-          (v: DataOption2) => v.name.indexOf(val) > -1
+          (v: DataOption) => v.name.indexOf(val) > -1
         );
       });
       break;
@@ -296,6 +309,21 @@ function filterSelector(val: any, update: Function, filtername: string) {
         );
       });
       break;
+    case "positionPathSide":
+      update(() => {
+        positionAreaOptiond.value = positionAreaOptiondMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
+
+    case "positionExecutive":
+      update(() => {
+        posExecutiveOption.value = posExecutiveOptionMain.value.filter(
+          (v: DataOption) => v.name.indexOf(val) > -1
+        );
+      });
+      break;
 
     default:
       break;
@@ -318,14 +346,19 @@ function onSubmit() {
 
 async function submit() {
   const formData = {
-    profileId: isStatusEdit.value ||  empType.value !== ''? undefined : profileId.value,
+    profileEmployeeId:
-    profileEmployeeId: empType.value !== "" ? profileId.value : undefined,
+      !isStatusEdit.value && empType.value !== "" ? profileId.value : undefined,
+    profileId:
+      !isStatusEdit.value && empType.value === "" ? profileId.value : undefined,
     date: formDataSalary.date, // วันที่
     posNo: formDataSalary.posNo, //เลขที่ตำแหน่ง
     position: formDataSalary.position, //ตำแหน่ง
-    positionLine: formDataSalary.positionLine, //สายงาน
+    positionLine:
-    positionPathSide: formDataSalary.positionPathSide, // ด้าน/สาขา
+      empType.value === "" ? formDataSalary.positionLine : undefined, //สายงาน
-    positionExecutive: formDataSalary.positionExecutive, //ตำแหน่งทางการบริหาร
+    positionPathSide:
+      empType.value === "" ? formDataSalary.positionPathSide : undefined, // ด้าน/สาขา
+    positionExecutive:
+      empType.value === "" ? formDataSalary.positionExecutive : undefined, //ตำแหน่งทางการบริหาร
     positionType: formDataSalary.positionType, // ประเภทตำแหน่ง
     positionLevel: formDataSalary.positionLevel, // ระดับตำแหน่ง
     amount:
@@ -395,6 +428,95 @@ function onClikcHistory(id: string) {
   modalHistory.value = true;
 }
 
+async function fetchDataOption() {
+  showLoader();
+  await http
+    .get(config.API.orgPosPosition + `?keyword=&type=ALL`)
+    .then((res) => {
+      const data = res.data.result;
+      console.log(res);
+
+      const seen = new Set();
+      const seen2 = new Set();
+
+      const listPositionField = data.filter((item: any) => {
+        if (seen.has(item.positionField)) {
+          return false;
+        } else {
+          seen.add(item.positionField);
+          return true;
+        }
+      });
+      positionFielOptiondMain.value = listPositionField.map((e: any) => ({
+        id: e.positionField,
+        name: e.positionField,
+      }));
+
+      const listPositionArea = data.filter((item: any) => {
+        if (
+          item.positionArea === null ||
+          item.positionArea === "" ||
+          item.positionArea === "-" ||
+          seen2.has(item.positionArea)
+        ) {
+          return false;
+        } else {
+          seen2.add(item.positionArea);
+          return true;
+        }
+      });
+      positionAreaOptiondMain.value = listPositionArea.map((e: any) => ({
+        id: e.positionArea,
+        name: e.positionArea,
+      }));
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchDataOptionExecutive() {
+  showLoader();
+  http
+    .get(config.API.orgPosExecutive)
+    .then((res) => {
+      const data = res.data.result;
+      posExecutiveOptionMain.value = data.map((e: any) => ({
+        id: e.posExecutiveName,
+        name: e.posExecutiveName,
+      }));
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchOptionGroup() {
+  showLoader();
+  await http
+    .get(config.API.orgEmployeeType)
+    .then(async (res) => {
+      dataLevel.value = res.data.result;
+      posTypeOptionsMain.value = res.data.result.map((e: any) => ({
+        id: e.id,
+        name: e.posTypeName,
+      }));
+      posTypeOptions.value = posTypeOptionsMain.value;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 onMounted(() => {
   fetchListSalary();
 });
@@ -535,7 +657,7 @@ onMounted(() => {
   </d-table>
 
   <q-dialog v-model="modalDialogSalary" persistent>
-    <q-card>
+    <q-card style="width: 900px; max-width: 80vw">
       <q-form greedy @submit.prevent @validation-success="onSubmit">
         <DialogHeader
           :tittle="
@@ -640,59 +762,6 @@ onMounted(() => {
               />
             </div>
 
-            <div class="col-xs-6 col-sm-6 col-md-4">
-              <q-input
-                outlined
-                dense
-                lazy-rules
-                v-model="formDataSalary.positionLine"
-                hide-bottom-space
-                :label="`${'สายงาน'}`"
-              />
-              <!-- <q-select
-                outlined
-                dense
-                lazy-rules
-                borderless
-                v-model="formDataSalary.positionLine"
-                :label="`${'สายงาน'}`"
-                emit-value
-                map-options
-                option-label="name"
-                :options="positionLineOptions"
-                option-value="id"
-                hide-bottom-space
-                use-input
-                input-debounce="0"
-                @filter="(inputValue: any,
-                      doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLine'
-                      )"
-              /> -->
-            </div>
-
-            <div class="col-xs-6 col-sm-6 col-md-4">
-              <q-input
-                outlined
-                dense
-                lazy-rules
-                v-model="formDataSalary.positionPathSide"
-                hide-bottom-space
-                :label="`${'ด้าน/สาขา'}`"
-              />
-            </div>
-            <div class="col-xs-6 col-sm-6 col-md-4">
-              <q-input
-                outlined
-                dense
-                lazy-rules
-                borderless
-                v-model="formDataSalary.positionExecutive"
-                hide-bottom-space
-                :label="`${'ตำแหน่งทางการบริหาร'}`"
-              >
-              </q-input>
-            </div>
-
             <div class="col-xs-6 col-sm-6 col-md-4">
               <q-select
                 ref="positionType Ref"
@@ -701,7 +770,7 @@ onMounted(() => {
                 lazy-rules
                 borderless
                 v-model="formDataSalary.positionType"
-                :label="`${'ตำแหน่งประเภท'}`"
+                :label="empType == '' ? 'ตำแหน่งประเภท' : 'กลุ่มงาน'"
                 emit-value
                 map-options
                 option-label="name"
@@ -711,7 +780,7 @@ onMounted(() => {
                 use-input
                 input-debounce="0"
                 @update:model-value="updateSelectType"
-                :rules="[(val: string) => !!val || `${'กรุณาเลือกตำแหน่งประเภท'}`]"
+                :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกตำแหน่งประเภท'  ]:[(val: string) => !!val ||  'กรุณาเลือกกลุ่มงาน' ]"
                 @filter="(inputValue: any,
                       doneFn: Function) => filterSelector(inputValue, doneFn, 'posType'
                       )"
@@ -726,8 +795,8 @@ onMounted(() => {
                 lazy-rules
                 borderless
                 v-model="formDataSalary.positionLevel"
-                :rules="[(val: string) => !!val || `${'กรุณาเลือกระดับตำแหน่ง'}`]"
+                :rules="empType == '' ? [(val: string) => !!val || 'กรุณาเลือกระดับตำแหน่ง' ] : [(val: string) => !!val ||   'กรุณาเลือกระดับชั้นงาน']"
-                :label="`${'ระดับตำแหน่ง'}`"
+                :label="empType == '' ? 'ระดับตำแหน่ง' : 'ระดับชั้นงาน'"
                 emit-value
                 map-options
                 option-label="name"
@@ -742,6 +811,76 @@ onMounted(() => {
               />
             </div>
             <div class="col-md-4"></div>
+
+            <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+              <q-select
+                outlined
+                dense
+                lazy-rules
+                borderless
+                v-model="formDataSalary.positionLine"
+                :label="`${'สายงาน'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="positionFielOptiond"
+                option-value="id"
+                hide-bottom-space
+                use-input
+                clearable
+                input-debounce="0"
+                @filter="(inputValue: any,
+                      doneFn: Function) => filterSelector(inputValue, doneFn, 'positionLine'
+                      )"
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+              <q-select
+                outlined
+                dense
+                lazy-rules
+                borderless
+                v-model="formDataSalary.positionPathSide"
+                :label="`${'ด้าน/สาขา'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="positionAreaOptiond"
+                option-value="id"
+                hide-bottom-space
+                use-input
+                clearable
+                input-debounce="0"
+                @filter="(inputValue: any,
+                      doneFn: Function) => filterSelector(inputValue, doneFn, 'positionPathSide'
+                      )"
+              />
+            </div>
+
+            <div class="col-xs-6 col-sm-6 col-md-4" v-if="empType == ''">
+              <q-select
+                outlined
+                dense
+                lazy-rules
+                borderless
+                v-model="formDataSalary.positionExecutive"
+                :label="`${'ตำแหน่งทางการบริหาร'}`"
+                emit-value
+                map-options
+                option-label="name"
+                :options="posExecutiveOption"
+                option-value="id"
+                hide-bottom-space
+                use-input
+                input-debounce="0"
+                clearable
+                @filter="(inputValue: any,
+                    doneFn: Function) => filterSelector(inputValue, doneFn, 'positionExecutive'
+                    )"
+              />
+            </div>
+
             <div class="col-xs-6 col-sm-6 col-md-4">
               <q-input
                 ref="salaryRef"
@@ -771,6 +910,7 @@ onMounted(() => {
                 hide-bottom-space
               />
             </div>
+
             <div class="col-xs-6 col-sm-6 col-md-4">
               <q-input
                 ref="amountRef"

src/modules/04_registryNew/interface/index/government.ts

@@ -24,13 +24,6 @@ interface GovAgeForm {
   day: number;
 }
 
-interface MyObjectRef {
-  containDate: object | null;
-  workDate: object | null;
-  reasonSameDate: object | null;
-  [key: string]: any;
-}
-
 interface RequestItemsHistoryObject {
   lastUpdatedAt: Date;
   lastUpdateFullName: string;
@@ -54,4 +47,4 @@ interface RequestItemsHistoryObject {
   createdFullName: string | null;
   createdAt: Date;
 }
-export type { MyObjectRef, RequestItemsHistoryObject, FormMain };
+export type { RequestItemsHistoryObject, FormMain };

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

@@ -15,7 +15,7 @@ interface RequestItemsObject {
   country: string;
   other: string;
   duration: string;
-  durationYear: number | null;
+  durationYear: number | null | string;
   note: string;
   educationLevelId: string;
   positionPath: string;