Merge branch 'develop' into devTee

src/modules/04_registryNew/components/detail/Achievement/01_ProfessionalLicense.vue

@@ -28,6 +28,8 @@ const route = useRoute();
 const id = ref<string>(route.params.id.toString());
 const dialogStatus = ref<string>("create");
 const editId = ref<string>("");
+const keyword = ref<string>("");
+const historyKeyword = ref<string>("");
 
 const columns = ref<QTableProps["columns"]>([
   {
@@ -95,31 +97,15 @@ const profesLicenseData = reactive<RequestItemsObject>({
   certificateNo: "",
   issueDate: new Date(),
   expireDate: new Date(),
+  profileId: id.value,
 });
 
 const rows = ref<ResponseObject[]>([]);
 const historyRows = ref<ResponseObject[]>([]);
 
-const formFilter = reactive({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-});
-
-const historyFormFilter = reactive({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-});
-
 const pagination = ref({
-  page: formFilter.page,
+  page: 1,
-  rowsPerPage: formFilter.pageSize,
+  rowsPerPage: 10,
-});
-
-const historyPagination = ref({
-  page: historyFormFilter.page,
-  rowsPerPage: historyFormFilter.pageSize,
 });
 
 const visibleColumns = ref<string[]>([
@@ -138,10 +124,6 @@ const historyVisibleColumns = ref<string[]>([
   "expireDate",
 ]);
 
-function validateForm() {
-  onSubmit();
-}
-
 async function onSubmit() {
   dialogConfirm(
     $q,
@@ -198,13 +180,7 @@ function editForm(row: any) {
 async function addData() {
   await http
     .post(config.API.profileNewCertificate, {
-      profileId: id.value,
+      ...profesLicenseData,
-      expireDate: profesLicenseData.expireDate,
-      issueDate: profesLicenseData.issueDate,
-      certificateNo: profesLicenseData.certificateNo,
-      certificateType: profesLicenseData.certificateType,
-      issuer: profesLicenseData.issuer,
-      isActive: true,
     })
     .then(() => {
       fetchData(id.value);
@@ -221,12 +197,8 @@ async function addData() {
 async function editData(idData: string) {
   await http
     .patch(config.API.profileNewCertificateByCertificateId(idData), {
-      expireDate: profesLicenseData.expireDate,
+      ...profesLicenseData,
-      issueDate: profesLicenseData.issueDate,
+      profileId: undefined,
-      certificateNo: profesLicenseData.certificateNo,
-      certificateType: profesLicenseData.certificateType,
-      issuer: profesLicenseData.issuer,
-      isActive: true,
     })
     .then(() => {
       fetchData(id.value);
@@ -240,18 +212,20 @@ async function editData(idData: string) {
     });
 }
 
-async function deleteData(idData: string) {
+function deleteData(idData: string) {
-  await http
+  dialogRemove($q, () =>
-    .delete(config.API.profileNewCertificateByCertificateId(idData))
+    http
-    .then(() => {
+      .delete(config.API.profileNewCertificateByCertificateId(idData))
-      fetchData(id.value);
+      .then(() => {
-    })
+        fetchData(id.value);
-    .catch((err) => {
+      })
-      messageError($q, err);
+      .catch((err) => {
-    })
+        messageError($q, err);
-    .finally(() => {
+      })
-      hideLoader();
+      .finally(() => {
-    });
+        hideLoader();
+      })
+  );
 }
 
 async function fetchHistoryData(id: string) {
@@ -293,13 +267,7 @@ onMounted(async () => {
     >
 
     <q-space />
-    <q-input
+    <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
-      dense
-      outlined
-      v-model="formFilter.keyword"
-      label="ค้นหา"
-      class="q-mr-sm"
-    >
       <template v-slot:append>
         <q-icon name="search" />
       </template>
@@ -362,7 +330,7 @@ onMounted(async () => {
     bordered
     :paging="true"
     dense
-    :filter="formFilter.keyword"
+    :filter="keyword"
     v-model:pagination="pagination"
     :rows-per-page-options="[20, 50, 100]"
     class="custom-header-table"
@@ -422,9 +390,7 @@ onMounted(async () => {
             size="14px"
             icon="mdi-delete"
             clickable
-            @click.stop="
+            @click.stop="deleteData(props.row.id)"
-              dialogRemove($q, async () => await deleteData(props.row.id))
-            "
             v-close-popup
           >
             <q-tooltip>ลบข้อมูล</q-tooltip>
@@ -484,7 +450,7 @@ onMounted(async () => {
 
   <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-form @submit.prevent greedy @validation-success="onSubmit()">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header
             :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
@@ -492,7 +458,7 @@ onMounted(async () => {
           />
         </q-card-section>
         <q-separator color="grey-4" />
-        <q-card-section class="row q-gutter-sm q-pb-sm">
+        <div class="row q-gutter-sm q-px-md q-pb-sm q-mt-sm">
           <div class="col">
             <q-input
               outlined
@@ -517,8 +483,8 @@ onMounted(async () => {
               hide-bottom-space
             />
           </div>
-        </q-card-section>
+        </div>
-        <q-card-section class="row q-gutter-sm q-py-none">
+        <div class="row q-gutter-sm q-px-md q-pb-sm">
           <div class="col">
             <q-input
               outlined
@@ -573,8 +539,8 @@ onMounted(async () => {
               </template>
             </datepicker>
           </div>
-        </q-card-section>
+        </div>
-        <q-card-section class="row q-pt-sm q-gutter-sm">
+        <div class="row q-gutter-sm q-px-md q-pb-sm">
           <div class="col">
             <datepicker
               menu-class-name="modalfix"
@@ -614,7 +580,7 @@ onMounted(async () => {
             </datepicker>
           </div>
           <div class="col"></div>
-        </q-card-section>
+        </div>
         <q-card-actions align="right">
           <q-btn
             id="onSubmit"
@@ -634,81 +600,79 @@ onMounted(async () => {
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
     <q-card style="min-width: 70%" class="bg-white">
-      <q-form @submit.prevent greedy @validation-success="validateForm">
+      <q-card-section class="flex justify-between" style="padding: 0">
-        <q-card-section class="flex justify-between" style="padding: 0">
+        <dialog-header
-          <dialog-header
+          tittle="ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ"
-            tittle="ประวัติแก้ไขใบอนุญาตประกอบวิชาชีพ"
+          :close="closeHistoryDialog"
-            :close="closeHistoryDialog"
+        />
-          />
+      </q-card-section>
-        </q-card-section>
+      <q-separator color="grey-4" />
-        <q-separator color="grey-4" />
+      <q-card-section>
-        <q-card-section>
+        <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
-          <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
+          <q-space />
-            <q-space />
+          <q-input
-            <q-input
-              dense
-              outlined
-              bg-color="white"
-              v-model="historyFormFilter.keyword"
-              label="ค้นหา"
-              class="q-mr-sm"
-            >
-              <template v-slot:append>
-                <q-icon name="search" />
-              </template>
-            </q-input>
-
-            <q-select
-              v-model="historyVisibleColumns"
-              multiple
-              outlined
-              dense
-              bg-color="white"
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="columns"
-              option-value="name"
-              options-cover
-              style="min-width: 150px"
-            />
-          </q-toolbar>
-          <d-table
-            ref="table"
-            :columns="columns"
-            :rows="historyRows"
-            row-key="name"
-            flat
-            :filter="historyFormFilter.keyword"
-            v-model:pagination="historyPagination"
-            bordered
-            :paging="true"
             dense
-            :rows-per-page-options="[20, 50, 100]"
+            outlined
-            class="custom-header-table"
+            bg-color="white"
-            :visible-columns="historyVisibleColumns"
+            v-model="historyKeyword"
+            label="ค้นหา"
+            class="q-mr-sm"
           >
-            <template v-slot:header="props">
+            <template v-slot:append>
-              <q-tr :props="props">
+              <q-icon name="search" />
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-                <q-th auto-width />
-              </q-tr>
             </template>
-            <template v-slot:body="props">
+          </q-input>
-              <q-tr :props="props" class="cursor-pointer">
+
-                <q-td v-for="col in props.cols" :key="col.id">
+          <q-select
-                  <div>
+            v-model="historyVisibleColumns"
-                    {{ col.value ? col.value : "-" }}
+            multiple
-                  </div>
+            outlined
-                </q-td>
+            dense
-              </q-tr>
+            bg-color="white"
-            </template>
+            options-dense
-          </d-table>
+            :display-value="$q.lang.table.columns"
-        </q-card-section>
+            emit-value
-      </q-form>
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </q-toolbar>
+        <d-table
+          ref="table"
+          :columns="columns"
+          :rows="historyRows"
+          row-key="name"
+          flat
+          :filter="historyKeyword"
+          v-model:pagination="pagination"
+          bordered
+          :paging="true"
+          dense
+          :rows-per-page-options="[20, 50, 100]"
+          class="custom-header-table"
+          :visible-columns="historyVisibleColumns"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
     </q-card>
   </q-dialog>
 </template>

src/modules/04_registryNew/components/detail/Achievement/02_Train.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch, onMounted } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import dialogHeader from "@/components/DialogHeader.vue";
 import type { QTableProps } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
@@ -148,8 +148,10 @@ const isDate = ref<string>("false");
 const dialogStatus = ref<string>("create");
 const historyDialog = ref<boolean>(false);
 const editId = ref<string>("");
-
+const keyword = ref<string>("");
+const historyKeyword = ref<string>("");
 const trainData = reactive<RequestItemsObject>({
+  profileId: id.value,
   name: "",
   topic: "",
   yearly: new Date().getFullYear(),
@@ -162,28 +164,12 @@ const trainData = reactive<RequestItemsObject>({
   endDate: new Date(),
   startYear: new Date().getFullYear(),
   finishYear: new Date().getFullYear(),
-});
+  isDate: isDate.value === "false" ? false : true,
-
-const formFilter = reactive({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
 });
 
 const pagination = ref({
-  page: formFilter.page,
-  rowsPerPage: formFilter.pageSize,
-});
-
-const historyFormFilter = reactive({
   page: 1,
-  pageSize: 10,
+  rowsPerPage: 10,
-  keyword: "",
-});
-
-const historyPagination = ref({
-  page: historyFormFilter.page,
-  rowsPerPage: historyFormFilter.pageSize,
 });
 
 const rows = ref<ResponseObject[]>([]);
@@ -215,10 +201,6 @@ const historyVisibleColumns = ref<string[]>([
   "endDate", // วันสิ้นสุด
 ]);
 
-function validateForm() {
-  onSubmit();
-}
-
 async function onSubmit() {
   dialogConfirm(
     $q,
@@ -267,19 +249,9 @@ function editForm(row: any) {
 async function addData() {
   await http
     .post(config.API.profileNewTraining, {
-      profileId: id.value,
+      ...trainData,
-      name: trainData.name,
+      startYear: undefined,
-      topic: trainData.topic ? trainData.topic : "",
+      endYear: undefined,
-      yearly: trainData.yearly,
-      place: trainData.place ? trainData.place : "",
-      duration: trainData.duration ? trainData.duration : "",
-      department: trainData.department ? trainData.department : "",
-      numberOrder: trainData.numberOrder ? trainData.numberOrder : "",
-      dateOrder: trainData.dateOrder,
-      startDate: trainData.startDate,
-      endDate: trainData.endDate,
-      isDate: isDate.value === "true" ? true : false,
-      isActive: true,
     })
     .then(() => {
       fetchData(id.value);
@@ -296,18 +268,10 @@ async function addData() {
 async function editData(idData: string) {
   await http
     .patch(config.API.profileNewTrainingByTrainingId(idData), {
-      name: trainData.name,
+      ...trainData,
-      topic: trainData.topic ? trainData.topic : "",
+      profileId: undefined,
-      yearly: trainData.yearly,
+      startYear: undefined,
-      place: trainData.place ? trainData.place : "",
+      finishYear: undefined,
-      duration: trainData.duration ? trainData.duration : "",
-      department: trainData.department ? trainData.department : "",
-      numberOrder: trainData.numberOrder ? trainData.numberOrder : "",
-      dateOrder: trainData.dateOrder,
-      startDate: trainData.startDate,
-      endDate: trainData.endDate,
-      isDate: isDate.value === "true" ? true : false,
-      isActive: true,
     })
     .then(() => {
       fetchData(id.value);
@@ -321,18 +285,21 @@ async function editData(idData: string) {
     });
 }
 
-async function deleteData(idData: string) {
+function deleteData(idData: string) {
-  await http
+  dialogRemove($q, () =>
-    .delete(config.API.profileNewTrainingByTrainingId(idData))
+    http
-    .then(() => {
+      .delete(config.API.profileNewTrainingByTrainingId(idData))
-      fetchData(id.value);
+      .then(() => {
-    })
+        fetchData(id.value);
-    .catch((err) => {
+        success($q, "ลบข้อมูลสำเร็จ");
-      messageError($q, err);
+      })
-    })
+      .catch((err) => {
-    .finally(() => {
+        messageError($q, err);
-      hideLoader();
+      })
-    });
+      .finally(() => {
+        hideLoader();
+      })
+  );
 }
 
 function closeDialog() {
@@ -343,62 +310,13 @@ function closeHistoryDialog() {
   historyDialog.value = false;
 }
 
-watch(
-  () => isDate.value,
-  () => {
-    if (isDate.value === "false") {
-      console.log(trainData.startDate);
-      trainData.startYear = +trainData.startDate.toString().slice(11, 15);
-      trainData.finishYear = +trainData.endDate.toString().slice(11, 15);
-      trainData.startDate = new Date(trainData.startYear + "-01-01");
-      trainData.endDate = new Date(trainData.finishYear + "-01-01");
-    } else {
-      trainData.startDate = new Date(trainData.startYear + "-01-01");
-      trainData.endDate = new Date(trainData.finishYear + "-01-01");
-    }
-  }
-);
-
-watch(
-  () => trainData.startYear,
-  () => {
-    if (isDate.value === "false") {
-      trainData.startDate = new Date(trainData.startYear + "-01-01");
-    }
-  }
-);
-watch(
-  () => trainData.finishYear,
-  () => {
-    if (isDate.value === "false") {
-      trainData.endDate = new Date(trainData.finishYear + "-01-01");
-    }
-  }
-);
-
-watch(
-  () => trainData.startDate,
-  () => {
-    if (isDate.value === "true") {
-      trainData.startYear = +trainData.startDate.toString().slice(11, 15);
-    }
-  }
-);
-watch(
-  () => trainData.endDate,
-  () => {
-    if (isDate.value === "true") {
-      trainData.finishYear = +trainData.endDate.toString().slice(11, 15);
-    }
-  }
-);
-
 async function fetchData(id: string) {
   showLoader();
   await http
     .get(config.API.profileNewTrainingByProfileId(id))
     .then(async (res) => {
       rows.value = res.data.result;
+      console.log(res.data.result);
     })
     .catch((err) => {
       messageError($q, err);
@@ -449,13 +367,7 @@ onMounted(async () => {
     >
 
     <q-space />
-    <q-input
+    <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
-      dense
-      outlined
-      v-model="formFilter.keyword"
-      label="ค้นหา"
-      class="q-mr-sm"
-    >
       <template v-slot:append>
         <q-icon name="search" />
       </template>
@@ -519,7 +431,7 @@ onMounted(async () => {
     bordered
     :paging="true"
     dense
-    :filter="formFilter.keyword"
+    :filter="keyword"
     :rows-per-page-options="[20, 50, 100]"
     v-model:pagination="pagination"
     class="custom-header-table"
@@ -579,9 +491,7 @@ onMounted(async () => {
             size="14px"
             icon="mdi-delete"
             clickable
-            @click.stop="
+            @click.stop="deleteData(props.row.id)"
-              dialogRemove($q, async () => await deleteData(props.row.id))
-            "
             v-close-popup
           >
             <q-tooltip>ลบข้อมูล</q-tooltip>
@@ -642,7 +552,7 @@ onMounted(async () => {
 
   <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-form @submit.prevent greedy @validation-success="onSubmit()">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header
             :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
@@ -651,7 +561,7 @@ onMounted(async () => {
         </q-card-section>
         <q-separator color="grey-4" />
         <div class="col">
-          <q-card-section class="row q-gutter-sm">
+          <div class="row q-px-md q-mt-sm q-mb-sm q-gutter-sm">
             <div class="col">
               <q-input
                 outlined
@@ -679,8 +589,12 @@ onMounted(async () => {
                 hide-bottom-space
               />
             </div>
-          </q-card-section>
+          </div>
-          <q-card flat bordered class="q-px-sm q-mx-md q-mb q-pb-sm borderCard">
+          <q-card
+            flat
+            bordered
+            class="q-px-sm q-mx-md q-my-md q-pb-sm borderCard"
+          >
             <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
               <q-radio
                 v-model="isDate"
@@ -708,7 +622,12 @@ onMounted(async () => {
                   autoApply
                   year-picker
                   :enableTimePicker="false"
-                  @update:modelValue="trainData.startYear"
+                  @update:modelValue="
+                    (v:number) =>
+                      (trainData.startDate = new Date(
+                        `${v}-01-01T00:00:02.010+07:00`
+                      ))
+                  "
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -748,7 +667,12 @@ onMounted(async () => {
                   autoApply
                   year-picker
                   :enableTimePicker="false"
-                  @update:modelValue="trainData.finishYear"
+                  @update:modelValue="
+                    (v:number) =>
+                      (trainData.endDate = new Date(
+                        `${v}-01-01T00:00:02.010+07:00`
+                      ))
+                  "
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -789,6 +713,12 @@ onMounted(async () => {
                   autoApply
                   :enableTimePicker="false"
                   week-start="0"
+                  @update:modelValue="
+                    (v: Date) =>
+                      (trainData.startYear = parseInt(
+                        v.toString().slice(11, 15)
+                      ))
+                  "
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -828,6 +758,12 @@ onMounted(async () => {
                   autoApply
                   :enableTimePicker="false"
                   week-start="0"
+                  @update:modelValue="
+                    (v: Date)  =>
+                      (trainData.finishYear = parseInt(
+                        v.toString().slice(11, 15)
+                      ))
+                  "
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -860,7 +796,7 @@ onMounted(async () => {
               </div>
             </div>
           </q-card>
-          <q-card-section class="row q-gutter-sm q-pt-sm q-py-none">
+          <div class="row q-px-md q-mb-sm q-gutter-sm">
             <div class="col">
               <datepicker
                 menu-class-name="modalfix"
@@ -909,8 +845,8 @@ onMounted(async () => {
                 hide-bottom-space
               />
             </div>
-          </q-card-section>
+          </div>
-          <q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
+          <div class="row q-px-md q-mb-sm q-gutter-sm">
             <div class="col">
               <q-input
                 outlined
@@ -929,8 +865,8 @@ onMounted(async () => {
                 dense
               />
             </div>
-          </q-card-section>
+          </div>
-          <q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
+          <div class="row q-px-md q-mb-sm q-gutter-sm">
             <div class="col">
               <q-input
                 outlined
@@ -974,7 +910,7 @@ onMounted(async () => {
                 </template>
               </datepicker>
             </div>
-          </q-card-section>
+          </div>
         </div>
         <q-card-actions align="right">
           <q-btn
@@ -995,81 +931,79 @@ onMounted(async () => {
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
     <q-card style="min-width: 70%" class="bg-white">
-      <q-form @submit.prevent greedy @validation-success="validateForm">
+      <q-card-section class="flex justify-between" style="padding: 0">
-        <q-card-section class="flex justify-between" style="padding: 0">
+        <dialog-header
-          <dialog-header
+          tittle="ประวัติแก้ไขการฝึกอบรม/ดูงาน"
-            tittle="ประวัติแก้ไขการฝึกอบรม/ดูงาน"
+          :close="closeHistoryDialog"
-            :close="closeHistoryDialog"
+        />
-          />
+      </q-card-section>
-        </q-card-section>
+      <q-separator color="grey-4" />
-        <q-separator color="grey-4" />
+      <q-card-section>
-        <q-card-section>
+        <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
-          <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
+          <q-space />
-            <q-space />
+          <q-input
-            <q-input
-              dense
-              outlined
-              bg-color="white"
-              v-model="historyFormFilter.keyword"
-              label="ค้นหา"
-              class="q-mr-sm"
-            >
-              <template v-slot:append>
-                <q-icon name="search" />
-              </template>
-            </q-input>
-
-            <q-select
-              v-model="historyVisibleColumns"
-              multiple
-              outlined
-              dense
-              bg-color="white"
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="columns"
-              option-value="name"
-              options-cover
-              style="min-width: 150px"
-            />
-          </q-toolbar>
-          <d-table
-            ref="table"
-            :columns="columns"
-            :rows="historyRows"
-            row-key="name"
-            flat
-            :filter="historyFormFilter.keyword"
-            v-model:pagination="historyPagination"
-            bordered
-            :paging="true"
             dense
-            :rows-per-page-options="[20, 50, 100]"
+            outlined
-            class="custom-header-table"
+            bg-color="white"
-            :visible-columns="historyVisibleColumns"
+            v-model="historyKeyword"
+            label="ค้นหา"
+            class="q-mr-sm"
           >
-            <template v-slot:header="props">
+            <template v-slot:append>
-              <q-tr :props="props">
+              <q-icon name="search" />
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-                <q-th auto-width />
-              </q-tr>
             </template>
-            <template v-slot:body="props">
+          </q-input>
-              <q-tr :props="props" class="cursor-pointer">
+
-                <q-td v-for="col in props.cols" :key="col.id">
+          <q-select
-                  <div>
+            v-model="historyVisibleColumns"
-                    {{ col.value ? col.value : "-" }}
+            multiple
-                  </div>
+            outlined
-                </q-td>
+            dense
-              </q-tr>
+            bg-color="white"
-            </template>
+            options-dense
-          </d-table>
+            :display-value="$q.lang.table.columns"
-        </q-card-section>
+            emit-value
-      </q-form>
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </q-toolbar>
+        <d-table
+          ref="table"
+          :columns="columns"
+          :rows="historyRows"
+          row-key="name"
+          flat
+          :filter="historyKeyword"
+          v-model:pagination="pagination"
+          bordered
+          :paging="true"
+          dense
+          :rows-per-page-options="[20, 50, 100]"
+          class="custom-header-table"
+          :visible-columns="historyVisibleColumns"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value ? col.value : "-" }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
     </q-card>
   </q-dialog>
 </template>

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

@@ -204,7 +204,6 @@ const historyRows = ref<ResponseObject[]>([]);
 const editId = ref<string>("");
 const route = useRoute();
 const id = ref<string>(route.params.id.toString());
-
 const isDate = ref<string>("false");
 const educationOption = ref([
   { label: "ใช่", value: true },
@@ -213,6 +212,8 @@ const educationOption = ref([
 
 const historyDialog = ref<boolean>(false);
 const educationData = reactive<RequestItemsObject>({
+  isDate: isDate.value === "false" ? false : true,
+  profileId: id.value,
   educationLevel: "",
   institute: "",
   startYear: new Date().getFullYear(),
@@ -230,28 +231,17 @@ const educationData = reactive<RequestItemsObject>({
   duration: "",
   durationYear: null,
   note: "",
+  educationLevelId: "",
+  positionPath: "",
+  positionPathId: "",
 });
 
-const formFilter = reactive({
+const keyword = ref<string>("");
-  page: 1,
+const historyKeyword = ref<string>("");
-  pageSize: 10,
-  keyword: "",
-});
 
 const pagination = ref({
-  page: formFilter.page,
-  rowsPerPage: formFilter.pageSize,
-});
-
-const historyFormFilter = reactive({
   page: 1,
-  pageSize: 10,
+  rowsPerPage: 10,
-  keyword: "",
-});
-
-const historyPagination = ref({
-  page: historyFormFilter.page,
-  rowsPerPage: historyFormFilter.pageSize,
 });
 
 const visibleColumns = ref<string[]>([
@@ -289,10 +279,6 @@ const historyVisibleColumns = ref<string[]>([
   "note",
 ]);
 
-function validateForm() {
-  onSubmit();
-}
-
 async function onSubmit() {
   dialogConfirm(
     $q,
@@ -364,6 +350,7 @@ async function fetchData(id: string) {
     .get(config.API.profileNewEducationByProfileId(id))
     .then(async (res) => {
       rows.value = res.data.result;
+      console.log(rows.value);
     })
     .catch((err) => {
       messageError($q, err);
@@ -391,26 +378,9 @@ async function fetchHistoryData(id: string) {
 async function addData() {
   await http
     .post(config.API.profileNewEducation, {
-      profileId: id.value,
+      ...educationData,
-      isActive: true,
+      startYear: undefined,
-      country: educationData.country,
+      endYear: undefined,
-      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);
@@ -424,28 +394,13 @@ async function addData() {
     });
 }
 
-async function editData(idData: string) {
+function editData(idData: string) {
-  await http
+  http
     .patch(config.API.profileNewEducationByEducationId(idData), {
-      isActive: true,
+      ...educationData,
-      country: educationData.country,
+      profileId: undefined,
-      degree: educationData.degree,
+      startYear: undefined,
-      duration: educationData.duration,
+      endYear: undefined,
-      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);
@@ -459,73 +414,23 @@ async function editData(idData: string) {
     });
 }
 
-async function deleteData(idData: string) {
+function deleteData(idData: string) {
-  await http
+  dialogRemove($q, () =>
-    .delete(config.API.profileNewEducationByEducationId(idData))
+    http
-    .then(() => {
+      .delete(config.API.profileNewEducationByEducationId(idData))
-      fetchData(id.value);
+      .then(() => {
-    })
+        fetchData(id.value);
-    .catch((err) => {
+        success($q, "ลบข้อมูลสำเร็จ");
-      messageError($q, err);
+      })
-    })
+      .catch((err) => {
-    .finally(() => {
+        messageError($q, err);
-      hideLoader();
+      })
-    });
+      .finally(() => {
+        hideLoader();
+      })
+  );
 }
 
-watch(
-  () => isDate.value,
-  () => {
-    if (isDate.value === "false") {
-      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.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);
 });
@@ -551,13 +456,7 @@ onMounted(async () => {
     >
 
     <q-space />
-    <q-input
+    <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
-      dense
-      outlined
-      v-model="formFilter.keyword"
-      label="ค้นหา"
-      class="q-mr-sm"
-    >
       <template v-slot:append>
         <q-icon name="search" />
       </template>
@@ -620,7 +519,7 @@ onMounted(async () => {
     flat
     bordered
     :paging="true"
-    :filter="formFilter.keyword"
+    :filter="keyword"
     dense
     v-model:pagination="pagination"
     :rows-per-page-options="[20, 50, 100]"
@@ -681,9 +580,7 @@ onMounted(async () => {
             size="14px"
             icon="mdi-delete"
             clickable
-            @click.stop="
+            @click.stop="deleteData(props.row.id)"
-              dialogRemove($q, async () => await deleteData(props.row.id))
-            "
             v-close-popup
           >
             <q-tooltip>ลบข้อมูล</q-tooltip>
@@ -806,7 +703,7 @@ onMounted(async () => {
 
   <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-form @submit.prevent greedy @validation-success="onSubmit()">
         <q-card-section class="flex justify-between" style="padding: 0">
           <dialog-header
             :tittle="dialogStatus == 'edit' ? 'แก้ไขข้อมูล' : 'เพิ่มข้อมูล'"
@@ -815,8 +712,8 @@ onMounted(async () => {
         </q-card-section>
         <q-separator color="grey-4" />
         <div class="col">
-          <q-card-section class="row q-gutter-sm">
+          <div class="row q-pa-md q-col-gutter-sm">
-            <div class="col">
+            <div class="col-6">
               <q-input
                 outlined
                 v-model="educationData.educationLevel"
@@ -827,7 +724,7 @@ onMounted(async () => {
                 hide-bottom-space
               />
             </div>
-            <div class="col">
+            <div class="col-6">
               <q-input
                 outlined
                 v-model="educationData.institute"
@@ -838,8 +735,12 @@ onMounted(async () => {
                 hide-bottom-space
               />
             </div>
-          </q-card-section>
+          </div>
-          <q-card flat bordered class="q-px-sm q-mx-md q-mb q-pb-sm borderCard">
+          <q-card
+            flat
+            bordered
+            class="q-mx-md q-px-md q-pb-md q-mb-md borderCard"
+          >
             <div class="row col-12 q-gutter-md q-py-sm text-grey-7">
               <q-radio
                 v-model="isDate"
@@ -867,7 +768,12 @@ onMounted(async () => {
                   autoApply
                   year-picker
                   :enableTimePicker="false"
-                  @update:modelValue="educationData.startYear"
+                  @update:modelValue="
+                    (v:number) =>
+                      (educationData.startDate = new Date(
+                        `${v}-01-01T00:00:02.010+07:00`
+                      ))
+                  "
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -905,7 +811,12 @@ onMounted(async () => {
                   autoApply
                   year-picker
                   :enableTimePicker="false"
-                  @update:modelValue="educationData.endYear"
+                  @update:modelValue="
+                    (v:number) =>
+                      (educationData.endDate = new Date(
+                        `${v}-01-01T00:00:02.010+07:00`
+                      ))
+                  "
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -945,6 +856,12 @@ onMounted(async () => {
                   autoApply
                   :enableTimePicker="false"
                   week-start="0"
+                  @update:modelValue="
+                    (v: Date) =>
+                      (educationData.startYear = parseInt(
+                        v.toString().slice(11, 15)
+                      ))
+                  "
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -982,6 +899,12 @@ onMounted(async () => {
                   autoApply
                   :enableTimePicker="false"
                   week-start="0"
+                  @update:modelValue="
+                    (v: Date)  =>
+                      (educationData.endYear = parseInt(
+                        v.toString().slice(11, 15)
+                      ))
+                  "
                 >
                   <template #year="{ year }">{{ year + 543 }}</template>
                   <template #year-overlay-value="{ value }">{{
@@ -1013,7 +936,7 @@ onMounted(async () => {
               </div>
             </div>
           </q-card>
-          <q-card-section class="row q-gutter-sm q-pt-sm">
+          <div class="row q-gutter-sm q-px-md">
             <div class="col">
               <datepicker
                 menu-class-name="modalfix"
@@ -1064,13 +987,14 @@ onMounted(async () => {
                 option-value="value"
                 option-label="label"
                 :rules="[
-                  (val) => !!val || `${'กรุณาเลือกวุฒิการศึกษาในตำแหน่ง'}`,
+                  (val) =>
+                    val !== null || `${'กรุณาเลือกวุฒิการศึกษาในตำแหน่ง'}`,
                 ]"
                 label="เป็นวุฒิการศึกษาในตำแหน่ง"
               />
             </div>
-          </q-card-section>
+          </div>
-          <q-card-section class="row q-gutter-sm q-py-none">
+          <div class="row q-gutter-sm q-px-md q-mb-sm">
             <div class="col">
               <q-input
                 outlined
@@ -1091,8 +1015,8 @@ onMounted(async () => {
                 dense
               />
             </div>
-          </q-card-section>
+          </div>
-          <q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
+          <div class="row q-gutter-sm q-px-md q-mb-sm">
             <div class="col">
               <q-input
                 outlined
@@ -1112,8 +1036,8 @@ onMounted(async () => {
                 mask="#.##"
               />
             </div>
-          </q-card-section>
+          </div>
-          <q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
+          <div class="row q-gutter-sm q-px-md q-mb-sm">
             <div class="col">
               <q-input
                 outlined
@@ -1132,8 +1056,8 @@ onMounted(async () => {
                 dense
               />
             </div>
-          </q-card-section>
+          </div>
-          <q-card-section class="row q-gutter-sm q-pt-sm q-pb-none">
+          <div class="row q-gutter-sm q-px-md">
             <div class="col">
               <q-input
                 outlined
@@ -1157,8 +1081,8 @@ onMounted(async () => {
                 dense
               />
             </div>
-          </q-card-section>
+          </div>
-          <q-card-section class="row q-gutter-sm q-pt-sm">
+          <div class="row q-gutter-sm q-px-md">
             <div class="col">
               <q-input
                 outlined
@@ -1169,7 +1093,7 @@ onMounted(async () => {
                 type="textarea"
               />
             </div>
-          </q-card-section>
+          </div>
         </div>
         <q-card-actions align="right">
           <q-btn
@@ -1190,82 +1114,80 @@ onMounted(async () => {
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
     <q-card style="min-width: 70%" class="bg-white">
-      <q-form @submit.prevent greedy @validation-success="validateForm">
+      <q-card-section class="flex justify-between" style="padding: 0">
-        <q-card-section class="flex justify-between" style="padding: 0">
+        <dialog-header
-          <dialog-header
+          tittle="ประวัติแก้ไขประวัติการศึกษา"
-            tittle="ประวัติแก้ไขประวัติการศึกษา"
+          :close="closeHistoryDialog"
-            :close="closeHistoryDialog"
+        />
-          />
+      </q-card-section>
-        </q-card-section>
+      <q-separator color="grey-4" />
-        <q-separator color="grey-4" />
+      <q-card-section>
-        <q-card-section>
+        <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
-          <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
+          <q-space />
-            <q-space />
+          <q-input
-            <q-input
-              dense
-              outlined
-              bg-color="white"
-              v-model="historyFormFilter.keyword"
-              label="ค้นหา"
-              class="q-mr-sm"
-            >
-              <template v-slot:append>
-                <q-icon name="search" />
-              </template>
-            </q-input>
-
-            <q-select
-              v-model="historyVisibleColumns"
-              multiple
-              outlined
-              dense
-              bg-color="white"
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="columns"
-              option-value="name"
-              options-cover
-              style="min-width: 150px"
-            />
-          </q-toolbar>
-          <d-table
-            ref="table"
-            :columns="columns"
-            :rows="historyRows"
-            row-key="name"
-            flat
-            bordered
-            :paging="true"
             dense
-            :filter="historyFormFilter.keyword"
+            outlined
-            v-model:pagination="historyPagination"
+            bg-color="white"
-            :rows-per-page-options="[20, 50, 100]"
+            v-model="historyKeyword"
-            class="custom-header-table"
+            label="ค้นหา"
-            :visible-columns="historyVisibleColumns"
+            class="q-mr-sm"
           >
-            <template v-slot:header="props">
+            <template v-slot:append>
-              <q-tr :props="props">
+              <q-icon name="search" />
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-                <q-th auto-width />
-              </q-tr>
             </template>
-            <template v-slot:body="props">
+          </q-input>
-              <q-tr :props="props" class="cursor-pointer">
+
-                <q-td v-for="col in props.cols" :key="col.id">
+          <q-select
-                  <div>
+            v-model="historyVisibleColumns"
-                    {{ col.value === "" ? "-" : col.value }}
+            multiple
-                  </div>
+            outlined
-                </q-td>
+            dense
-                <q-td auto-width> </q-td>
+            bg-color="white"
-              </q-tr>
+            options-dense
-            </template>
+            :display-value="$q.lang.table.columns"
-          </d-table>
+            emit-value
-        </q-card-section>
+            map-options
-      </q-form>
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </q-toolbar>
+        <d-table
+          ref="table"
+          :columns="columns"
+          :rows="historyRows"
+          row-key="name"
+          flat
+          bordered
+          :paging="true"
+          dense
+          :filter="historyKeyword"
+          v-model:pagination="pagination"
+          :rows-per-page-options="[20, 50, 100]"
+          class="custom-header-table"
+          :visible-columns="historyVisibleColumns"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>
+                  {{ col.value === "" ? "-" : col.value }}
+                </div>
+              </q-td>
+              <q-td auto-width> </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
     </q-card>
   </q-dialog>
 </template>

src/modules/04_registryNew/components/detail/PersonalInformation/06_SpecialSkill.vue

@@ -76,34 +76,22 @@ const historyRows = ref<ResponseObject[]>([]);
 const route = useRoute();
 const id = ref<string>(route.params.id.toString());
 const editId = ref<string>("");
-
+const keyword = ref<string>("");
-const formFilter = reactive({
+const historyKeyword = ref<string>("");
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-});
 
 const specialSkill = reactive<RequestItemsObject>({
   field: "",
   detail: "",
   remark: "",
   reference: "",
+  profileId: id.value,
+  dateStart: null,
+  dateEnd: null,
 });
 
 const pagination = ref({
-  page: formFilter.page,
-  rowsPerPage: formFilter.pageSize,
-});
-
-const historyFormFilter = reactive({
   page: 1,
-  pageSize: 10,
+  rowsPerPage: 10,
-  keyword: "",
-});
-
-const historyPagination = ref({
-  page: historyFormFilter.page,
-  rowsPerPage: historyFormFilter.pageSize,
 });
 
 const visibleColumns = ref<string[]>([
@@ -127,10 +115,6 @@ function closeHistoryDialog() {
   historyDialog.value = false;
 }
 
-function validateForm() {
-  onSubmit();
-}
-
 async function onSubmit() {
   dialogConfirm(
     $q,
@@ -166,7 +150,6 @@ async function fetchData(id: string) {
     .get(config.API.profileNewAbilityByProfileId(id))
     .then(async (res) => {
       rows.value = res.data.result;
-      console.log(rows.value);
     })
     .catch((err) => {
       messageError($q, err);
@@ -194,12 +177,7 @@ async function fetchHistoryData(id: string) {
 async function addData() {
   await http
     .post(config.API.profileNewAbility, {
-      profileId: id.value,
+      ...specialSkill,
-      isActive: true,
-      remark: specialSkill.remark,
-      field: specialSkill.field,
-      reference: specialSkill.reference,
-      detail: specialSkill.detail,
       dateStart: null,
       dateEnd: null,
     })
@@ -218,13 +196,10 @@ async function addData() {
 async function editData(idData: string) {
   await http
     .patch(config.API.profileNewAbilityByAbilityId(idData), {
-      isActive: true,
+      ...specialSkill,
-      remark: specialSkill.remark,
-      field: specialSkill.field,
-      reference: specialSkill.reference,
-      detail: specialSkill.detail,
       dateStart: null,
       dateEnd: null,
+      profileId: undefined,
     })
     .then(() => {
       fetchData(id.value);
@@ -239,17 +214,20 @@ async function editData(idData: string) {
 }
 
 async function deleteData(idData: string) {
-  await http
+  dialogRemove($q, () =>
-    .delete(config.API.profileNewAbilityByAbilityId(idData))
+    http
-    .then(() => {
+      .delete(config.API.profileNewAbilityByAbilityId(idData))
-      fetchData(id.value);
+      .then(() => {
-    })
+        fetchData(id.value);
-    .catch((err) => {
+        success($q, "ลบข้อมูลสำเร็จ");
-      messageError($q, err);
+      })
-    })
+      .catch((err) => {
-    .finally(() => {
+        messageError($q, err);
-      hideLoader();
+      })
-    });
+      .finally(() => {
+        hideLoader();
+      })
+  );
 }
 
 onMounted(async () => {
@@ -268,13 +246,7 @@ onMounted(async () => {
       <q-tooltip>เพิ่ม</q-tooltip>
     </q-btn>
     <q-space />
-    <q-input
+    <q-input dense outlined v-model="keyword" label="ค้นหา" class="q-mr-sm">
-      dense
-      outlined
-      v-model="formFilter.keyword"
-      label="ค้นหา"
-      class="q-mr-sm"
-    >
       <template v-slot:append>
         <q-icon name="search" />
       </template>
@@ -338,7 +310,7 @@ onMounted(async () => {
     :columns="columns"
     :rows="rows"
     :paging="true"
-    :filter="formFilter.keyword"
+    :filter="keyword"
     v-model:pagination="pagination"
     :rows-per-page-options="[20, 50, 100]"
     :visible-columns="visibleColumns"
@@ -396,9 +368,7 @@ onMounted(async () => {
             size="14px"
             icon="mdi-delete"
             clickable
-            @click.stop="
+            @click.stop="deleteData(props.row.id)"
-              dialogRemove($q, async () => await deleteData(props.row.id))
-            "
             v-close-popup
           >
             <q-tooltip>ลบข้อมูล</q-tooltip>
@@ -461,9 +431,12 @@ onMounted(async () => {
 
   <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-form @submit.prevent greedy @validation-success="onSubmit()">
         <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" />
         <q-card-section class="col q-gutter-sm q-pr-md">
@@ -527,80 +500,78 @@ onMounted(async () => {
 
   <q-dialog v-model="historyDialog" class="dialog" persistent>
     <q-card style="min-width: 70%" class="bg-white">
-      <q-form @submit.prevent greedy @validation-success="validateForm">
+      <q-card-section class="flex justify-between" style="padding: 0">
-        <q-card-section class="flex justify-between" style="padding: 0">
+        <dialog-header
-          <dialog-header
+          tittle="ประวัติแก้ไขความสามารถพิเศษ"
-            tittle="ประวัติแก้ไขความสามารถพิเศษ"
+          :close="closeHistoryDialog"
-            :close="closeHistoryDialog"
+        />
-          />
+      </q-card-section>
-        </q-card-section>
+      <q-separator color="grey-4" />
-        <q-separator color="grey-4" />
+      <q-card-section>
-        <q-card-section>
+        <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
-          <q-toolbar style="padding: 0px" class="text-primary q-mb-sm">
+          <q-space />
-            <q-space />
+          <q-input
-            <q-input
-              dense
-              outlined
-              bg-color="white"
-              v-model="historyFormFilter.keyword"
-              label="ค้นหา"
-              class="q-mr-sm"
-            >
-              <template v-slot:append>
-                <q-icon name="search" />
-              </template>
-            </q-input>
-
-            <q-select
-              v-model="historyVisibleColumns"
-              multiple
-              outlined
-              dense
-              bg-color="white"
-              options-dense
-              :display-value="$q.lang.table.columns"
-              emit-value
-              map-options
-              :options="columns"
-              option-value="name"
-              options-cover
-              style="min-width: 150px"
-            />
-          </q-toolbar>
-          <d-table
-            ref="table"
-            :columns="columns"
-            :rows="historyRows"
-            row-key="name"
-            flat
-            bordered
-            :paging="true"
             dense
-            :filter="historyFormFilter.keyword"
+            outlined
-            v-model:pagination="historyPagination"
+            bg-color="white"
-            :rows-per-page-options="[20, 50, 100]"
+            v-model="historyKeyword"
-            class="custom-header-table"
+            label="ค้นหา"
-            :visible-columns="historyVisibleColumns"
+            class="q-mr-sm"
           >
-            <template v-slot:header="props">
+            <template v-slot:append>
-              <q-tr :props="props">
+              <q-icon name="search" />
-                <q-th v-for="col in props.cols" :key="col.name" :props="props">
-                  <span class="text-weight-medium">{{ col.label }}</span>
-                </q-th>
-                <q-th auto-width />
-              </q-tr>
             </template>
-            <template v-slot:body="props" v-if="mode === 'table'">
+          </q-input>
-              <q-tr :props="props" class="cursor-pointer">
+
-                <q-td v-for="col in props.cols" :key="col.id">
+          <q-select
-                  <div>{{ col.value ? col.value : "-" }}</div>
+            v-model="historyVisibleColumns"
-                </q-td>
+            multiple
-                <q-td auto-width> </q-td>
+            outlined
-              </q-tr>
+            dense
-            </template>
+            bg-color="white"
-          </d-table>
+            options-dense
-        </q-card-section>
+            :display-value="$q.lang.table.columns"
-      </q-form>
+            emit-value
+            map-options
+            :options="columns"
+            option-value="name"
+            options-cover
+            style="min-width: 150px"
+          />
+        </q-toolbar>
+        <d-table
+          ref="table"
+          :columns="columns"
+          :rows="historyRows"
+          row-key="name"
+          flat
+          bordered
+          :paging="true"
+          dense
+          :filter="historyKeyword"
+          v-model:pagination="pagination"
+          :rows-per-page-options="[20, 50, 100]"
+          class="custom-header-table"
+          :visible-columns="historyVisibleColumns"
+        >
+          <template v-slot:header="props">
+            <q-tr :props="props">
+              <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                <span class="text-weight-medium">{{ col.label }}</span>
+              </q-th>
+              <q-th auto-width />
+            </q-tr>
+          </template>
+          <template v-slot:body="props" v-if="mode === 'table'">
+            <q-tr :props="props" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.id">
+                <div>{{ col.value ? col.value : "-" }}</div>
+              </q-td>
+              <q-td auto-width> </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
     </q-card>
   </q-dialog>
 </template>

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

@@ -1,4 +1,5 @@
 interface RequestItemsObject {
+    profileId: string
     educationLevel: string;
     institute: string;
     startYear: number;
@@ -16,6 +17,10 @@ interface RequestItemsObject {
     duration: string;
     durationYear: number | null;
     note: string;
+    educationLevelId: string,
+    positionPath: string,
+    positionPathId: string,
+    isDate: boolean
   }
   
   export type { RequestItemsObject };

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

@@ -4,6 +4,7 @@ interface RequestItemsObject {
     certificateNo: string;
     issueDate: Date;
     expireDate: Date;
+    profileId: string;
 }
 
 export type { RequestItemsObject };

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

@@ -3,6 +3,9 @@ interface RequestItemsObject {
     detail: string;
     remark: string;
     reference: string;
+    dateStart: Date | null,
+    dateEnd: Date | null ,
+    profileId: string,
   }
   
   export type { RequestItemsObject };

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

@@ -11,6 +11,8 @@ interface RequestItemsObject {
     endDate: Date,
     startYear: number,
     finishYear: number,
+    profileId: string,
+    isDate: boolean,
   }
   
   export type { RequestItemsObject };

src/modules/13_salary/components/SalaryEmployeeLists/TabMain.vue

@@ -30,6 +30,9 @@ const { messageError, showLoader, hideLoader } = useCounterMixin();
 /** props*/
 const props = defineProps({
   periodLatest: { type: Object as () => DataPeriodLatest, require: true },
+  rootId: { type: String, require: true },
+  periodId: { type: String, require: true },
+  roundFilter: { type: Object, require: true },
 });
 
 const total = ref<number>();
@@ -269,17 +272,17 @@ function fetchDataPeriod(id: string) {
 }
 
 /**function เปลี่ยนกลุ่ม*/
-function changeTabGroup() {
+// function changeTabGroup() {
-  formFilter.page = 1;
+//   formFilter.page = 1;
-  formFilter.pageSize = 10;
+//   formFilter.pageSize = 10;
-  formFilter.keyword = "";
+//   formFilter.keyword = "";
-  store.tabType = "PENDING";
+//   store.tabType = "PENDING";
-  props.periodLatest &&
+//   props.periodLatest &&
-    store.fetchPeriodLatest(props?.periodLatest, store.tabGroup);
+//     store.fetchPeriodLatest(props?.periodLatest, store.tabGroup);
-  store.groupId && fetchDataQuota(store.groupId);
+//   store.groupId && fetchDataQuota(store.groupId);
-  store.groupId && fetchDataPeriod(store.groupId);
+//   store.groupId && fetchDataPeriod(store.groupId);
-  splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
+//   splitterModel.value = store.roundMainCode === "APR" ? 13 : 16;
-}
+// }
 
 /**function เปลี่ยนขั้น*/
 function changeTabType() {
@@ -296,20 +299,53 @@ function fetchDataPeriodNew() {
 }
 
 function onClickDownload(data: DataOption) {
-  console.log(data);
+  showLoader();
-  // showLoader();
+  if (data.id === "emp-08") {
-  // http
+    const formData = {
-  //   .get(config.API.salaryReportByid(salaryId.value))
+      type: "HAFT",
-  //   .then((res) => {
+      startDate:
-  //     const dataList = res.data.result;
+        props?.roundFilter?.shortCode === "APR"
-  //     genReportXLSX(dataList, "อัตราเงินเดือน");
+          ? `${props?.roundFilter?.year - 1}-10-01`
-  //   })
+          : `${props?.roundFilter?.year}-04-01`,
-  //   .catch((e) => {
+      endDate:
-  //     messageError($q, e);
+        props?.roundFilter?.shortCode === "APR"
-  //   })
+          ? `${props?.roundFilter?.year}-03-31`
-  //   .finally(() => {
+          : `${props?.roundFilter?.year}-09-30`,
-  //     hideLoader();
+    };
-  //   });
+    http
+      .post(config.API.leaveReportLeaveday("employee"), formData)
+      .then((res) => {
+        const dataList = res.data.result;
+        genReportXLSX(dataList, data.name);
+      })
+      .catch((e) => {
+        messageError($q, e);
+      })
+      .finally(() => {
+        hideLoader();
+      });
+  } else {
+    if (props.rootId && props.periodId) {
+      http
+        .get(
+          config.API.salaryReportListsByid(
+            data.id,
+            props.rootId,
+            props.periodId
+          )
+        )
+        .then((res) => {
+          const dataList = res.data.result;
+          genReportXLSX(dataList, data.name);
+        })
+        .catch((e) => {
+          messageError($q, e);
+        })
+        .finally(() => {
+          hideLoader();
+        });
+    }
+  }
 }
 
 const modalDialogInfoCriteria = ref<boolean>(false);

src/modules/13_salary/components/SalaryLists/TabMain.vue

@@ -309,15 +309,16 @@ function fetchDataPeriodNew() {
 }
 
 function onClickDownload(data: DataOption) {
+  showLoader();
   if (data.id === "gov-06") {
     const formData = {
       type: "HAFT",
       startDate:
-        data.id === "gov-06"
+        props?.roundFilter?.shortCode === "APR"
           ? `${props?.roundFilter?.year - 1}-10-01`
           : `${props?.roundFilter?.year}-04-01`,
       endDate:
-        data.id === "gov-06"
+        props?.roundFilter?.shortCode === "APR"
           ? `${props?.roundFilter?.year}-03-31`
           : `${props?.roundFilter?.year}-09-30`,
     };
@@ -335,7 +336,6 @@ function onClickDownload(data: DataOption) {
       });
   } else {
     if (props.rootId && props.periodId) {
-      showLoader();
       console.log("id==>", data.id);
       console.log("rootId==>", props.rootId);
       console.log("periodId==>", props.periodId);

src/modules/13_salary/store/SalaryEmployeeListsStore.ts

@@ -64,36 +64,60 @@ export const useSalaryEmployeeListSDataStore = defineStore(
     /** List Download รายงานของรอบเมษายน*/
     const itemDownloadApr = ref<DataOption[]>([
       {
-        id: "gov-01",
+        id: "emp-01",
-        name: "รายชื่อข้าราชการผู้ที่ครองตำแหน่ง ณ วันที่ 1 มีนาคม",
+        name: "รบัญชีคำนวณโควตา",
       },
       {
-        id: "gov-02",
+        id: "emp-02",
-        name: "บัญชีการคำนวณโควตาเลื่อนเงินเดือน รอบเมษายน",
+        name: "รายชื่อลูกจ้างประจำผู้ครองตำแหน่ง ณ วันที่ 1 มีนาคม",
       },
       {
-        id: "gov-03",
+        id: "emp-03",
-        name: "รายชื่อข้าราชการที่ได้รับการเสนอขอเลื่อนหนึ่งขั้น",
+        name: "รายชื่อลูกจ้างประจำที่ได้รับการเสนอขอเลื่อนขั้นค่าจ้างหนึ่งขั้น",
       },
       {
-        id: "gov-04",
+        id: "emp-04",
-        name: "แบบ 1 กท รอบเมษายน",
+        name: "แบบ ลจ.กทม.1-รายชื่อลูกจ้างผู้สมควรได้เลื่อนขั้นค่าจ้าง",
       },
       {
-        id: "gov-05",
+        id: "emp-05",
-        name: "แบบ 2 กท รอบเมษายน",
+        name: "แบบ ลจ.กทม.1-1-รายชื่อลูกจ้างผู้สมควรได้รับค่าตอบแทนพิเศษ",
       },
       {
-        id: "gov-06",
+        id: "emp-06",
-        name: "แบบ 3 กท บัญชีแสดงวันลาครึ่งปี ขรก.",
+        name: "แบบ ลจ.กทม.2-รายชื่อลูกจ้างผู้ไม่สมควรเลื่อนขั้นค่าจ้าง",
       },
       {
-        id: "gov-07",
+        id: "emp-07",
-        name: "คำสั่งเลื่อนเงินเดือน รอบเมษายน",
+        name: "แบบ ลจ.กทม.2-1-รายชื่อลูกจ้างผู้ไม่สมควรได้รับค่าตอบแทนพิเศษ",
       },
       {
-        id: "gov-08",
+        id: "emp-08",
-        name: "คำสั่งค่าตอบแทนพิเศษ และผู้ไม่ได้เลื่อน รอบเมษายน",
+        name: "แบบ ลจ.กทม.3-บัญชีแสดงวันลาในครึ่งปีของลูกจ้าง",
+      },
+      {
+        id: "emp-09",
+        name: "บัญชีรายชื่อลูกจ้างประจำผู้ไม่ได้รับเลื่อนขั้นค่าจ้างในวันที่ 1 เมษายน ย้อนหลัง 3 ครั้ง ",
+      },
+      {
+        id: "emp-10",
+        name: "รายชื่อลูกจ้างประจำผู้มีผลการประเมินดีเด่น",
+      },
+      {
+        id: "emp-12",
+        name: "บัญชีรายละเอียดผู้ได้รับอัตราค่าจ้างสูงกว่าขั้นสูง (แนบท้ายคำสั่ง) ",
+      },
+      {
+        id: "emp-13",
+        name: "บัญชีรายชื่อลูกจ้างประจำผู้ไม่ได้รับการเลื่อนขั้นค่าจ้าง",
+      },
+      {
+        id: "emp-15",
+        name: "บัญชีรายละเอียดลูกจ้างประจำที่ได้รับค่าตอบแทนพิเศษ(แนบท้ายคำสั่ง)",
+      },
+      {
+        id: "emp-14",
+        name: "บัญชีรายชื่อลูกจ้างประจำผู้ไม่ได้รับค่าตอบแทนพิเศษ",
       },
     ]);
 

src/modules/13_salary/store/SalaryListsStore.ts

@@ -87,11 +87,11 @@ export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
     },
     {
       id: "gov-07",
-      name: "คำสั่งเลื่อนเงินเดือน รอบเมษายน",
+      name: "แนบท้ายคำสั่งเลื่อนเงินเดือน รอบเมษายน",
     },
     {
       id: "gov-08",
-      name: "คำสั่งค่าตอบแทนพิเศษ และผู้ไม่ได้เลื่อน รอบเมษายน",
+      name: "แนบท้ายคำสั่งค่าตอบแทนพิเศษ และผู้ไม่ได้เลื่อน รอบเมษายน",
     },
   ]);
 
@@ -123,15 +123,15 @@ export const useSalaryListSDataStore = defineStore("salaryListStore", () => {
     },
     {
       id: "gov-07",
-      name: "คำสั่งเลื่อนเงินเดือนข้าราชการเกษียณ",
+      name: "แนบท้ายคำสั่งเลื่อนเงินเดือนข้าราชการเกษียณ",
     },
     {
       id: "gov-08",
-      name: "คำสั่งเลื่อนเงินเดือน รอบตุลาคม",
+      name: "แนบท้ายคำสั่งเลื่อนเงินเดือน รอบตุลาคม",
     },
     {
       id: "gov-09",
-      name: "คำสั่งค่าตอบแทนพิเศษ และผู้ไม่ได้เลื่อนเงินเดือน รอบตุลาคม",
+      name: "แนบท้ายคำสั่งค่าตอบแทนพิเศษ และผู้ไม่ได้เลื่อนเงินเดือน รอบตุลาคม",
     },
   ]);
 

src/modules/13_salary/views/salaryEmployeeLists.vue

@@ -64,6 +64,7 @@ function getRound() {
         revisionId: x.revisionId,
         shortCode: x.period,
         isClose: x.isClose,
+        year: x.year,
         name:
           (x.period === "OCT"
             ? "รอบตุลาคม "
@@ -368,7 +369,13 @@ onMounted(() => {
 
   <q-card flat bordered>
     <div v-if="agencyFilter !== 'ALL'">
-      <TabGroup v-if="isLoad" :periodLatest="periodLatest" />
+      <TabGroup
+        v-if="isLoad"
+        :periodLatest="periodLatest"
+        :periodId="roundFilter.id"
+        :rootId="agencyFilter"
+        :roundFilter="roundFilter"
+      />
       <q-card v-else class="q-pa-sm">
         <div class="q-pa-sm">
           <q-banner inline-actions rounded class="bg-grey-1 text-center">