ทะเบียนประวัติ: ต่อAPI ประวัติการศึกษา

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

@@ -1,24 +1,36 @@
 <script setup lang="ts">
-import { ref, reactive, watch } from "vue";
+import { ref, reactive, watch, onMounted } from "vue";
 import moment from "moment";
 import dialogHeader from "@/components/DialogHeader.vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import { useRoute } from "vue-router";
 import { QForm, useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 const mixin = useCounterMixin();
 const $q = useQuasar();
-const { dialogConfirm, date2Thai } = mixin;
+const {
+  dialogRemove,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+} = mixin;
 
-const addDataDialog = ref<boolean>(false);
+const dialog = ref<boolean>(false);
+const dialogStatus = ref<string>("create");
 const mode = ref<string>("table");
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "level",
+    name: "educationLevel",
     align: "left",
     label: "ระดับศึกษา",
     sortable: true,
-    field: "level",
+    field: "educationLevel",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -47,22 +59,22 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "finishDate",
+    name: "endDate",
     align: "left",
     label: "ถึง",
     sortable: true,
-    field: "finishDate",
+    field: "endDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "graduateDate",
+    name: "finishDate",
     align: "left",
     label: "วันที่สำเร็จการศึกษา",
     sortable: true,
-    field: "graduateDate",
+    field: "finishDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
@@ -159,7 +171,7 @@ const columns = ref<QTableProps["columns"]>([
   {
     name: "durationYear",
     align: "left",
-    label: "ระยะเวลาหลักสูตร",
+    label: "ระยะเวลาหลักสูตร (ปี)",
     sortable: true,
     field: "durationYear",
     headerStyle: "font-size: 14px",
@@ -167,28 +179,65 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "note",
+    align: "left",
+    label: "หมายเหตุ",
+    sortable: true,
+    field: "note",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
-const backgroundColor = "grey-2";
+
+const rows = ref<any>([]);
+const editId = ref<string>("");
+const route = useRoute();
+const id = ref<string>(route.params.id.toString());
+
 const isDate = ref<string>("false");
-const educationOption = ["ใช่", "ไม่ใช่"];
+const educationOption = ref([
+  { label: "ใช่", value: true },
+  { label: "ไม่ใช่", value: false },
+]);
 const historyDialog = ref<boolean>(false);
-const educationData = reactive({
-  level: "",
+const educationData = reactive<{
+  educationLevel: string;
+  institute: string;
+  startYear: number;
+  endYear: number;
+  finishDate: Date;
+  startDate: Date;
+  endDate: Date;
+  isEducation: boolean | null;
+  degree: string;
+  field: string;
+  fundName: string;
+  gpa: string;
+  country: string;
+  other: string;
+  duration: string;
+  durationYear: number | null;
+  note: string;
+}>({
+  educationLevel: "",
   institute: "",
   startYear: new Date().getFullYear(),
-  finishYear: new Date().getFullYear(),
-  graduateDate: new Date(),
-  startDate: new Date(),
+  endYear: new Date().getFullYear(),
   finishDate: new Date(),
-  isEducation: "",
+  startDate: new Date(),
+  endDate: new Date(),
+  isEducation: null,
   degree: "",
   field: "",
   fundName: "",
-  gpa: null,
+  gpa: "",
   country: "",
   other: "",
   duration: "",
-  durationYear: "",
+  durationYear: null,
   note: "",
 });
 
@@ -203,75 +252,8 @@ const pagination = ref({
   rowsPerPage: formFilter.pageSize,
 });
 
-const row = [
-  {
-    level: "ประกาศนียบัตรบัณฑิต",
-    institute: "เชียงใหม่วิทย์",
-    degree: "ปริญญาตรี",
-    field: "วิศวะคอม",
-    gpa: "4.5",
-    country: "อังกฤษ",
-    duration: "3 ปี",
-    durationYear: "4 ปี",
-    other: "อบต เชียงใหม่",
-    fundName: "ทุนรัฐบาล",
-    isEducation: "ปริญญาตรี",
-    finishDate: new Date(),
-    startDate: new Date(),
-    graduateDate: new Date(),
-  },
-  {
-    level: "ประกาศนียบัตรบัณฑิต",
-    institute: "โปลิวิทยาคม",
-    degree: "ปริญญาตรี",
-    field: "วิศวะคอม",
-    gpa: "3.8",
-    country: "อังกฤษ",
-    duration: "3 ปี",
-    durationYear: "4 ปี",
-    other: "อบต เชียงใหม่",
-    fundName: "ทุนรัฐบาล",
-    isEducation: "ปริญญาตรี",
-    finishDate: new Date(),
-    startDate: new Date(),
-    graduateDate: new Date(),
-  },
-  {
-    level: "ประกาศนียบัตรบัณฑิต",
-    institute: "โรงเรียนวัฒโน",
-    degree: "ปริญญาตรี",
-    field: "วิศวะคอม",
-    gpa: "3.8",
-    country: "อังกฤษ",
-    duration: "3 ปี",
-    durationYear: "4 ปี",
-    other: "อบต เชียงใหม่",
-    fundName: "ทุนรัฐบาล",
-    isEducation: "ปริญญาตรี",
-    finishDate: new Date(),
-    startDate: new Date(),
-    graduateDate: new Date(),
-  },
-  {
-    level: "ประกาศนียบัตรบัณฑิต",
-    institute: "โรงเรียนวัฒโน",
-    degree: "ปริญญาตรี",
-    field: "วิศวะคอม",
-    gpa: "3.8",
-    country: "อังกฤษ",
-    duration: "3 ปี",
-    durationYear: "4 ปี",
-    other: "อบต เชียงใหม่",
-    fundName: "ทุนรัฐบาล",
-    isEducation: "ปริญญาตรี",
-    finishDate: new Date(),
-    startDate: new Date(),
-    graduateDate: new Date(),
-  },
-];
-
 const visibleColumns = ref<string[]>([
-  "level",
+  "educationLevel",
   "institute",
   "degree",
   "field",
@@ -282,9 +264,10 @@ const visibleColumns = ref<string[]>([
   "other",
   "fundName",
   "isEducation",
-  "finishDate",
+  "endDate",
   "startDate",
-  "graduateDate",
+  "finishDate",
+  "note",
 ]);
 
 function validateForm() {
@@ -295,6 +278,7 @@ async function onSubmit() {
   dialogConfirm(
     $q,
     async () => {
+      dialogStatus.value === "create" ? addData() : editData(editId.value);
       closeDialog();
     },
     "ยืนยันการบันทึกข้อมูล",
@@ -302,29 +286,195 @@ async function onSubmit() {
   );
 }
 
+function clearForm() {
+  isDate.value = "false";
+  educationData.educationLevel = "";
+  educationData.institute = "";
+  educationData.startYear = new Date().getFullYear();
+  educationData.endYear = new Date().getFullYear();
+  educationData.finishDate = new Date();
+  educationData.startDate = new Date();
+  educationData.endDate = new Date();
+  educationData.isEducation = null;
+  educationData.degree = "";
+  educationData.field = "";
+  educationData.fundName = "";
+  educationData.gpa = "";
+  educationData.country = "";
+  educationData.other = "";
+  educationData.duration = "";
+  educationData.durationYear = null;
+  educationData.note = "";
+}
+
 function closeDialog() {
-  addDataDialog.value = false;
+  clearForm();
+  dialog.value = false;
 }
 function closeHistoryDialog() {
   historyDialog.value = false;
 }
 
+async function fetchData(id: string) {
+  showLoader();
+  await http
+    .get(config.API.profileNewEducationByProfileId(id))
+    .then(async (res) => {
+      rows.value = res.data.result;
+      console.log(rows.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function addData() {
+  console.log(educationData.durationYear);
+  await http
+    .post(config.API.profileNewEducation, {
+      profileId: id.value,
+      isActive: true,
+      country: educationData.country,
+      degree: educationData.degree,
+      duration: educationData.duration,
+      durationYear: educationData.durationYear ? educationData.durationYear : 0,
+      field: educationData.field,
+      finishDate: educationData.finishDate,
+      fundName: educationData.fundName,
+      gpa: educationData.gpa,
+      institute: educationData.institute,
+      other: educationData.other,
+      startDate: educationData.startDate,
+      endDate: educationData.endDate,
+      educationLevel: educationData.educationLevel,
+      educationLevelId: "educationLevelId",
+      positionPath: "positionPath",
+      positionPathId: "positionPathId",
+      isDate: isDate.value === "true" ? true : false,
+      isEducation: educationData.isEducation,
+    })
+    .then(() => {
+      fetchData(id.value);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function editData(idData: string) {
+  await http
+    .patch(config.API.profileNewEducationByEducationId(idData), {
+      profileId: id.value,
+      isActive: true,
+      country: educationData.country,
+      degree: educationData.degree,
+      duration: educationData.duration,
+      durationYear: educationData.durationYear,
+      field: educationData.field,
+      finishDate: educationData.finishDate,
+      fundName: educationData.fundName,
+      gpa: educationData.gpa,
+      institute: educationData.institute,
+      other: educationData.other,
+      startDate: educationData.startDate,
+      endDate: educationData.endDate,
+      educationLevel: educationData.educationLevel,
+      educationLevelId: "educationLevelId",
+      positionPath: "positionPath",
+      positionPathId: "positionPathId",
+      isDate: isDate.value === "true" ? true : false,
+      isEducation: educationData.isEducation,
+    })
+    .then(() => {
+      fetchData(id.value);
+      success($q, "บันทึกข้อมูลสำเร็จ");
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function deleteData(idData: string) {
+  await http
+    .delete(config.API.profileNewEducationByEducationId(idData))
+    .then(() => {
+      fetchData(id.value);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
 watch(
   () => isDate.value,
   () => {
-    if (isDate.value === "true") {
-      educationData.startDate = new Date(`${educationData.startYear}`);
-      educationData.finishDate = new Date(`${educationData.finishYear}`);
+    if (isDate.value === "false") {
+      console.log(educationData.startDate);
+      educationData.startYear = +educationData.startDate
+        .toString()
+        .slice(11, 15);
+      educationData.endYear = +educationData.endDate.toString().slice(11, 15);
+      educationData.startDate = new Date(educationData.startYear + "-01-01");
+      educationData.endDate = new Date(educationData.endYear + "-01-01");
     } else {
-      educationData.startYear = parseInt(
-        moment(educationData.startDate).format("YYYY")
-      );
-      educationData.finishYear = parseInt(
-        moment(educationData.finishDate).format("YYYY")
-      );
+      educationData.startDate = new Date(educationData.startYear + "-01-01");
+      educationData.endDate = new Date(educationData.endYear + "-01-01");
     }
   }
 );
+
+watch(
+  () => educationData.startYear,
+  () => {
+    if (isDate.value === "false") {
+      educationData.startDate = new Date(educationData.startYear + "-01-01");
+    }
+  }
+);
+watch(
+  () => educationData.endYear,
+  () => {
+    if (isDate.value === "false") {
+      educationData.endDate = new Date(educationData.endYear + "-01-01");
+    }
+  }
+);
+
+watch(
+  () => educationData.startDate,
+  () => {
+    if (isDate.value === "true") {
+      educationData.startYear = +educationData.startDate
+        .toString()
+        .slice(11, 15);
+    }
+  }
+);
+watch(
+  () => educationData.endDate,
+  () => {
+    if (isDate.value === "true") {
+      educationData.endYear = +educationData.endDate.toString().slice(11, 15);
+    }
+  }
+);
+
+onMounted(async () => {
+  await fetchData(id.value);
+});
 </script>
 
 <template>
@@ -335,7 +485,13 @@ watch(
       color="primary"
       icon="add"
       size="16px"
-      @click="addDataDialog = true"
+      @click="
+        () => {
+          dialogStatus = 'create';
+          clearForm;
+          dialog = true;
+        }
+      "
     >
       <q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
     >
@@ -405,12 +561,13 @@ watch(
     :grid="mode === 'card'"
     ref="table"
     :columns="columns"
-    :rows="row"
+    :rows="rows"
     row-key="name"
     flat
     bordered
     :paging="true"
     dense
+    v-model:pagination="pagination"
     :rows-per-page-options="[20, 50, 100]"
     class="custom-header-table"
     :visible-columns="visibleColumns"
@@ -428,19 +585,46 @@ watch(
         <q-td
           v-for="col in props.cols"
           :key="col.id"
-          @click="addDataDialog = true"
+          @click="
+            () => {
+              dialogStatus = 'edit';
+              editId = props.row.id;
+              isDate = props.row.isDate ? 'true' : 'false';
+              educationData.educationLevel = props.row.educationLevel;
+              educationData.institute = props.row.institute;
+              educationData.finishDate = props.row.finishDate;
+              educationData.startDate = props.row.startDate;
+              educationData.endDate = props.row.endDate;
+              educationData.isEducation = props.row.isEducation;
+              educationData.degree = props.row.degree;
+              educationData.field = props.row.field;
+              educationData.fundName = props.row.fundName;
+              educationData.gpa = props.row.gpa;
+              educationData.country = props.row.country;
+              educationData.other = props.row.other;
+              educationData.duration = props.row.duration;
+              educationData.durationYear = props.row.durationYear;
+              educationData.note = props.row.note;
+              educationData.startYear = +props.row.startDate.slice(0, 4);
+              educationData.endYear = +props.row.endDate.slice(0, 4);
+              dialog = true;
+            }
+          "
         >
-          <div
-            v-if="
-              col.name === 'startDate' ||
-              col.name === 'finishDate' ||
-              col.name === 'graduateDate'
-            "
-          >
+          <div v-if="col.name === 'startDate' || col.name === 'endDate'">
+            <div v-if="props.row.isDate">{{ date2Thai(col.value) }}</div>
+            <div v-else>
+              {{ +col.value.slice(0, 4) + 543 }}
+            </div>
+          </div>
+          <div v-else-if="col.name === 'finishDate'">
             {{ col.value ? date2Thai(col.value) : "-" }}
           </div>
+          <div v-else-if="col.name === 'isEducation'">
+            {{ col.value === true ? "ใช่" : "ไม่ใช่" }}
+          </div>
           <div v-else>
-            {{ col.value }}
+            {{ col.value === "" ? "-" : col.value }}
           </div>
         </q-td>
         <q-td auto-width>
@@ -455,6 +639,21 @@ watch(
           >
             <q-tooltip>ประวัติแก้ไขประวัติการศึกษา</q-tooltip>
           </q-btn>
+          <q-btn
+            color="red"
+            flat
+            dense
+            round
+            size="12px"
+            icon="mdi-delete"
+            clickable
+            @click.stop="
+              dialogRemove($q, async () => await deleteData(props.row.id))
+            "
+            v-close-popup
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn>
         </q-td>
       </q-tr>
     </template>
@@ -469,7 +668,30 @@ watch(
               round
               color="primary"
               icon="edit"
-              @click="addDataDialog = true"
+              @click="
+                dialogStatus = 'edit';
+                editId = props.row.id;
+                console.log(props.cols);
+                isDate = props.row.isDate ? 'true' : 'false';
+                educationData.educationLevel = props.cols[0].value;
+                educationData.institute = props.cols[1].value;
+                educationData.startDate = props.cols[2].value;
+                educationData.endDate = props.cols[3].value;
+                educationData.finishDate = props.cols[4].value;
+                educationData.isEducation = props.cols[5].value;
+                educationData.degree = props.cols[6].value;
+                educationData.field = props.cols[7].value;
+                educationData.fundName = props.cols[8].value;
+                educationData.gpa = props.cols[9].value;
+                educationData.country = props.cols[10].value;
+                educationData.other = props.cols[11].value;
+                educationData.duration = props.cols[12].value;
+                educationData.durationYear = props.cols[13].value;
+                educationData.note = props.row.note;
+                educationData.startYear = +props.cols[2].value.slice(0, 4);
+                educationData.endYear = +props.cols[3].value.slice(0, 4);
+                dialog = true;
+              "
             >
               <q-tooltip>แก้ไขข้อมูล</q-tooltip>
             </q-btn>
@@ -492,13 +714,19 @@ watch(
             <div class="col-12">
               <div :class="`row bg-color`">
                 <div class="col-3 q-pa-sm label-color">ตั้งแต่</div>
-                <div class="col-4 q-pa-sm">
+                <div v-if="props.row.isDate" class="col-4 q-pa-sm">
                   {{ date2Thai(props.cols[2].value) }}
                 </div>
+                <div v-else class="col-4 q-pa-sm">
+                  {{ +props.cols[2].value.slice(0, 4) + 543 }}
+                </div>
                 <div class="col-2 q-pa-sm label-color">ถึง</div>
-                <div class="col-3 q-pa-sm">
+                <div v-if="props.row.isDate" class="col-3 q-pa-sm">
                   {{ date2Thai(props.cols[3].value) }}
                 </div>
+                <div v-else class="col-3 q-pa-sm">
+                  {{ +props.cols[3].value.slice(0, 4) + 543 }}
+                </div>
               </div>
             </div>
             <div class="col-3 q-pa-sm label-color">วันที่สำเร็จการศึกษา</div>
@@ -510,32 +738,54 @@ watch(
                 <div class="col-4 q-pa-sm label-color">
                   เป็นวุฒิการศึกษาในตำแหน่ง
                 </div>
-                <div class="col-3 q-pa-sm">{{ props.cols[5].value }}</div>
+                <div class="col-3 q-pa-sm">
+                  {{ props.cols[5].value ? "ใช่" : "ไม่ใช่" }}
+                </div>
                 <div class="col-2 q-pa-sm label-color">วุฒิการศึกษา</div>
-                <div class="col-3 q-pa-sm">{{ props.cols[6].value }}</div>
+                <div class="col-3 q-pa-sm">
+                  {{ props.cols[6].value ? props.cols[6].value : "-" }}
+                </div>
               </div>
             </div>
             <div class="col-3 q-pa-sm label-color">สาขาวืชา/ทาง</div>
-            <div class="col-4 q-pa-sm">{{ props.cols[7].value }}</div>
+            <div class="col-4 q-pa-sm">
+              {{ props.cols[7].value ? props.cols[7].value : "-" }}
+            </div>
             <div class="col-2 q-pa-sm label-color">ทุน</div>
-            <div class="col-3 q-pa-sm">{{ props.cols[8].value }}</div>
+            <div class="col-3 q-pa-sm">
+              {{ props.cols[8].value ? props.cols[8].value : "-" }}
+            </div>
             <div class="col-12">
               <div :class="`row bg-color`">
                 <div class="col-3 q-pa-sm label-color">เกรดเฉลี่ย</div>
-                <div class="col-4 q-pa-sm">{{ props.cols[9].value }}</div>
+                <div class="col-4 q-pa-sm">
+                  {{ props.cols[9].value ? props.cols[9].value : "-" }}
+                </div>
                 <div class="col-2 q-pa-sm label-color">ประเทศ</div>
-                <div class="col-3 q-pa-sm">{{ props.cols[10].value }}</div>
+                <div class="col-3 q-pa-sm">
+                  {{ props.cols[10].value ? props.cols[10].value : "-" }}
+                </div>
               </div>
             </div>
             <div class="col-3 q-pa-sm label-color">ข้อมูลการติดต่อ</div>
-            <div class="col-4 q-pa-sm">{{ props.cols[11].value }}</div>
+            <div class="col-4 q-pa-sm">
+              {{ props.cols[11].value ? props.cols[11].value : "-" }}
+            </div>
             <div class="col-2 q-pa-sm label-color">ระยะเวลา</div>
-            <div class="col-3 q-pa-sm">{{ props.cols[12].value }}</div>
+            <div class="col-3 q-pa-sm">
+              {{ props.cols[12].value ? props.cols[12].value : "-" }}
+            </div>
           </div>
           <div class="col-12">
             <div :class="`row bg-color`">
-              <div class="col-3 q-pa-sm label-color">ระยะเวลาหลักสูตร</div>
-              <div class="col-4 q-pa-sm">{{ props.cols[13].value }}</div>
+              <div class="col-3 q-pa-sm label-color">ระยะเวลาหลักสูตร (ปี)</div>
+              <div class="col-4 q-pa-sm">
+                {{ props.cols[13].value === 0 ? "-" : props.cols[13].value }}
+              </div>
+              <div class="col-2 q-pa-sm label-color">หมายเหตุ</div>
+              <div class="col-3 q-pa-sm">
+                {{ props.cols[14].value ? props.cols[14].value : "-" }}
+              </div>
             </div>
           </div>
         </q-card>
@@ -543,11 +793,14 @@ watch(
     </template>
   </d-table>
 
-  <q-dialog v-model="addDataDialog" class="dialog" persistent>
+  <q-dialog v-model="dialog" class="dialog" persistent>
     <q-card style="min-width: 40%" class="bg-white">
       <q-form @submit.prevent greedy @validation-success="validateForm">
         <q-card-section class="flex justify-between" style="padding: 0">
-          <dialog-header tittle="เพิ่มประวัติการศึกษา" :close="closeDialog" />
+          <dialog-header
+            :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
+            :close="closeDialog"
+          />
         </q-card-section>
         <q-separator color="grey-4" />
         <div class="col">
@@ -555,7 +808,7 @@ watch(
             <div class="col">
               <q-input
                 outlined
-                v-model="educationData.level"
+                v-model="educationData.educationLevel"
                 label="ระดับการศึกษา"
                 bg-color="white"
                 dense
@@ -636,12 +889,12 @@ watch(
               <div class="col">
                 <datepicker
                   menu-class-name="modalfix"
-                  v-model="educationData.finishYear"
+                  v-model="educationData.endYear"
                   :locale="'th'"
                   autoApply
                   year-picker
                   :enableTimePicker="false"
-                  @update:modelValue="educationData.finishYear"
+                  @update:modelValue="educationData.endYear"
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -653,7 +906,7 @@ watch(
                       lazy-rules
                       outlined
                       hide-bottom-space
-                      :model-value="educationData.finishYear + 543"
+                      :model-value="educationData.endYear + 543"
                       :rules="[
                         (val) => !!val || `${'กรุณาเลือกปีที่จบการศึกษา'}`,
                       ]"
@@ -713,7 +966,7 @@ watch(
               <div class="col">
                 <datepicker
                   menu-class-name="modalfix"
-                  v-model="educationData.finishDate"
+                  v-model="educationData.endDate"
                   :locale="'th'"
                   autoApply
                   :enableTimePicker="false"
@@ -728,7 +981,7 @@ watch(
                       outlined
                       dense
                       lazy-rules
-                      :model-value="date2Thai(educationData.finishDate)"
+                      :model-value="date2Thai(educationData.endDate)"
                       :rules="[
                         (val) => !!val || `${'กรุณาเลือกวันที่จบการศึกษา'}`,
                       ]"
@@ -753,7 +1006,7 @@ watch(
             <div class="col">
               <datepicker
                 menu-class-name="modalfix"
-                v-model="educationData.graduateDate"
+                v-model="educationData.finishDate"
                 :locale="'th'"
                 autoApply
                 :enableTimePicker="false"
@@ -769,7 +1022,7 @@ watch(
                     bg-color="white"
                     dense
                     lazy-rules
-                    :model-value="date2Thai(educationData.graduateDate)"
+                    :model-value="date2Thai(educationData.finishDate)"
                     :rules="[(val) => !!val || `${'กรุณาเลือกวันที่ได้รับ'}`]"
                     hide-bottom-space
                     :label="`${'วันที่ได้รับ'}`"
@@ -790,9 +1043,13 @@ watch(
               <q-select
                 outlined
                 dense
+                emit-value
+                map-options
                 bg-color="white"
                 v-model="educationData.isEducation"
                 :options="educationOption"
+                option-value="value"
+                option-label="label"
                 label="เป็นวุฒิการศึกษาในตำแหน่ง"
               />
             </div>
@@ -874,7 +1131,7 @@ watch(
               <q-input
                 outlined
                 v-model="educationData.durationYear"
-                label="ระยะเวลาหลักสูตร"
+                label="ระยะเวลาหลักสูตร (ปี)"
                 bg-color="white"
                 type="number"
                 dense
@@ -956,7 +1213,7 @@ watch(
           <d-table
             ref="table"
             :columns="columns"
-            :rows="row"
+            :rows="rows"
             row-key="name"
             flat
             bordered