From 933269114427df886544c7673d5a1a6d27c71520 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 21 Mar 2024 16:07:15 +0700
Subject: [PATCH 1/2] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4(=E0=B9=83=E0=B8=AB=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=88):=20=E0=B8=9C=E0=B8=B9=E0=B8=81=20API=20=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=99=E0=B8=97=E0=B8=B6=E0=B8=81=E0=B9=84=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=88=E0=B9=84=E0=B8=94=E0=B9=89=E0=B8=A3=E0=B8=B1=E0=B8=9A?=
 =?UTF-8?q?=E0=B9=80=E0=B8=87=E0=B8=B4=E0=B8=99=E0=B9=80=E0=B8=94=E0=B8=B7?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=99=E0=B8=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/registry/api.registry.ts              |  79 ++---
 .../detail/Salary/02_NotReceiveSalary.vue     | 288 +++++++++++-------
 .../Salary/02_NotReceiveSalaryHistory.vue     |  53 +++-
 .../04_registryNew/interface/index/salary.ts  |  27 +-
 .../interface/request/Salary.ts               |  11 +-
 5 files changed, 276 insertions(+), 182 deletions(-)

diff --git a/src/api/registry/api.registry.ts b/src/api/registry/api.registry.ts
index aa758679f..185ebf009 100644
--- a/src/api/registry/api.registry.ts
+++ b/src/api/registry/api.registry.ts
@@ -4,7 +4,15 @@ const registryNew = `${env.API_URI}/org/profile/`;
 
 export default {
   registryNew,
-  registryNewByProfileId: (profileId : string) => `${registryNew}${profileId}`,
+  registryNewByProfileId: (profileId: string) => `${registryNew}${profileId}`,
+
+  // บันทึกวันที่ไม่ได้รับเงินเดือนฯ
+  profileNewNoPaid: `${registryNew}nopaid`,
+  profileNewNoPaidByProfileId: (profileId: string) =>
+    `${registryNew}nopaid/${profileId}`,
+  profileNewNoPaidById: (dataId: string) => `${registryNew}nopaid/${dataId}`,
+  profileNewNoPaidHisById: (dataId: string) =>
+    `${registryNew}nopaid/history/${dataId}`,
 
   // เครื่องราชฯ
   profileNewInsign: `${registryNew}insignia`,
@@ -19,14 +27,17 @@ export default {
   profileNewHonorByProfileId: (profileId: string) =>
     `${registryNew}honor/${profileId}`,
   profileNewHonorById: (dataId: string) => `${registryNew}honor/${dataId}`,
-  profileNewHonorHisById: (dataId: string) => `${registryNew}honor/history/${dataId}`,
+  profileNewHonorHisById: (dataId: string) =>
+    `${registryNew}honor/history/${dataId}`,
 
   // ผลการประเมินการปฏิบัติราชการ
   profileNewAssessments: `${registryNew}assessments`,
   profileNewAssessmentsByProfileId: (profileId: string) =>
     `${registryNew}assessments/${profileId}`,
-  profileNewAssessmentsById: (dataId: string) => `${registryNew}assessments/${dataId}`,
-  profileNewAssessmentsHisById: (dataId: string) => `${registryNew}assessments/history/${dataId}`,
+  profileNewAssessmentsById: (dataId: string) =>
+    `${registryNew}assessments/${dataId}`,
+  profileNewAssessmentsHisById: (dataId: string) =>
+    `${registryNew}assessments/history/${dataId}`,
 
   // การฝึกอบรม
   profileNewTraining: `${registryNew}training`,
@@ -37,40 +48,40 @@ export default {
   profileNewTrainingHisByTrainingId: (trainingId: string) =>
     `${registryNew}training/history/${trainingId}`,
 
-// ประวัติการศึกษา
-profileNewEducation: `${registryNew}educations`,
-profileNewEducationByProfileId: (profileId: string) =>
-  `${registryNew}educations/${profileId}`,
-profileNewEducationByEducationId: (educationId: string) =>
-  `${registryNew}educations/${educationId}`,
-profileNewEducationHisByEducationId: (educationsId: string) =>
-  `${registryNew}educations/history/${educationsId}`,
+  // ประวัติการศึกษา
+  profileNewEducation: `${registryNew}educations`,
+  profileNewEducationByProfileId: (profileId: string) =>
+    `${registryNew}educations/${profileId}`,
+  profileNewEducationByEducationId: (educationId: string) =>
+    `${registryNew}educations/${educationId}`,
+  profileNewEducationHisByEducationId: (educationsId: string) =>
+    `${registryNew}educations/history/${educationsId}`,
 
-// ความสามารถพิเศษ
-profileNewAbility: `${registryNew}ability`,
-profileNewAbilityByProfileId: (profileId: string) =>
-  `${registryNew}ability/${profileId}`,
-profileNewAbilityByAbilityId: (abilityId: string) =>
-  `${registryNew}ability/${abilityId}`,
-profileNewAbilityHisByAbilityId: (abilityId: string) =>
-  `${registryNew}ability/history/${abilityId}`,
+  // ความสามารถพิเศษ
+  profileNewAbility: `${registryNew}ability`,
+  profileNewAbilityByProfileId: (profileId: string) =>
+    `${registryNew}ability/${profileId}`,
+  profileNewAbilityByAbilityId: (abilityId: string) =>
+    `${registryNew}ability/${abilityId}`,
+  profileNewAbilityHisByAbilityId: (abilityId: string) =>
+    `${registryNew}ability/history/${abilityId}`,
 
   // ใบอนุญาตประกอบวิชาชีพ
-profileNewCertificate: `${registryNew}certificate`,
-profileNewCertificateByProfileId: (profileId: string) =>
-  `${registryNew}certificate/${profileId}`,
-profileNewCertificateByCertificateId: (certificateId: string) =>
-  `${registryNew}certificate/${certificateId}`,
-profileNewCertificateHisByCertificateId: (certificateId: string) =>
-  `${registryNew}certificate/history/${certificateId}`,
+  profileNewCertificate: `${registryNew}certificate`,
+  profileNewCertificateByProfileId: (profileId: string) =>
+    `${registryNew}certificate/${profileId}`,
+  profileNewCertificateByCertificateId: (certificateId: string) =>
+    `${registryNew}certificate/${certificateId}`,
+  profileNewCertificateHisByCertificateId: (certificateId: string) =>
+    `${registryNew}certificate/history/${certificateId}`,
 
-// ข้อมูลอื่นๆ
-profileNewOther: `${registryNew}other`,
-profileNewOtherByProfileId: (profileId: string) =>
-`${registryNew}other/${profileId}`,
-profileNewOtherById: (dataId: string) => `${registryNew}other/${dataId}`,
-profileNewOtherHisById: (dataId: string) =>
-`${registryNew}other/history/${dataId}`,
+  // ข้อมูลอื่นๆ
+  profileNewOther: `${registryNew}other`,
+  profileNewOtherByProfileId: (profileId: string) =>
+    `${registryNew}other/${profileId}`,
+  profileNewOtherById: (dataId: string) => `${registryNew}other/${dataId}`,
+  profileNewOtherHisById: (dataId: string) =>
+    `${registryNew}other/history/${dataId}`,
 
     // ข้อมูลครอบครัว
 profileNewFamily: `${registryNew}family`,
diff --git a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
index 7e1367f8f..13df498b3 100644
--- a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalary.vue
@@ -1,19 +1,39 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { useQuasar } from "quasar";
+import { useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
-import type { ObjectReceiveRef } from "@/modules/04_registryNew/interface/index/salary";
-
+import { useCounterMixin } from "@/stores/mixin";
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogHisotory from "@/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue";
 
-import { useCounterMixin } from "@/stores/mixin";
+import type { QTableProps } from "quasar";
+import type { RowList } from "@/modules/04_registryNew/interface/index/salary";
+import type { RequestNoPaidObject } from "@/modules/04_registryNew/interface/request/Salary";
 
 const $q = useQuasar();
-const { date2Thai, dialogConfirm, showLoader, hideLoader, messageError } =
-  useCounterMixin();
+const route = useRoute();
+const {
+  date2Thai,
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  dialogRemove,
+} = useCounterMixin();
+const id = ref<string>("");
+const profileId = ref<string>(
+  route.params.id ? route.params.id.toString() : ""
+);
 
+const modelView = ref<string>("table");
+const modalDialog = ref<boolean>(false);
+const modalHistory = ref<boolean>(false);
+const isStatusEdit = ref<boolean>(false);
+const rows = ref<RowList[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
@@ -23,6 +43,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "date",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (v) => date2Thai(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -68,6 +89,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "refCommandDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (v) => date2Thai(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -79,115 +101,129 @@ const visibleColumns = ref<string[]>([
   "refCommandNo",
   "refCommandDate",
 ]);
-const rows = ref<any>([
-  {
-    date: new Date(),
-    detail: "รายละเอีียด",
-    reference: "อ้างอิง",
-    refCommandNo: "เลขที่คำสั่ง",
-    refCommandDate: new Date(),
-  },
-  {
-    date: new Date(),
-    detail: "รายละเอีียด",
-    reference: "อ้างอิง",
-    refCommandNo: "เลขที่คำสั่ง",
-    refCommandDate: new Date(),
-  },
-  {
-    date: new Date(),
-    detail: "รายละเอีียด",
-    reference: "อ้างอิง",
-    refCommandNo: "เลขที่คำสั่ง",
-    refCommandDate: new Date(),
-  },
-  {
-    date: new Date(),
-    detail: "รายละเอีียด",
-    reference: "อ้างอิง",
-    refCommandNo: "เลขที่คำสั่ง",
-    refCommandDate: new Date(),
-  },
-]);
-
-const formFilter = reactive({
-  page: 1,
-  pageSize: 10,
-  keyword: "",
-});
-
-const formData = reactive({
+const formData = reactive<RequestNoPaidObject>({
   date: null,
   reference: "",
   detail: "",
   refCommandNo: "",
   refCommandDate: null,
 });
-
-const dateRef = ref<Object | null>(null);
-const referenceRef = ref<Object | null>(null);
-const detailRef = ref<Object | null>(null);
-
-const ObjectRef: ObjectReceiveRef = {
-  date: dateRef,
-  reference: referenceRef,
-  detail: detailRef,
-};
-
-const modelView = ref<string>("table");
+const formFilter = reactive({
+  page: 1,
+  pageSize: 10,
+  keyword: "",
+});
 const maxPage = ref<number>(1);
-
 const pagination = ref({
   page: formFilter.page,
   rowsPerPage: formFilter.pageSize,
 });
 
-const modalDialog = ref<boolean>(false);
-const isStatusEdit = ref<boolean>(false);
-
 function onSubmit() {
-  const hasError = [];
-  for (const key in ObjectRef) {
-    if (Object.prototype.hasOwnProperty.call(ObjectRef, key)) {
-      const property = ObjectRef[key];
-      if (property.value && typeof property.value.validate === "function") {
-        const isValid = property.value.validate();
-        hasError.push(isValid);
-      }
-    }
-  }
-  if (hasError.every((result) => result === true)) {
-    dialogConfirm($q, () => {
-      onClickCloseDialog();
-    });
-  }
+  dialogConfirm($q, () => {
+    isStatusEdit.value ? editData() : saveData();
+    onClickCloseDialog();
+  });
 }
 
 function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
   isStatusEdit.value = StatusEdit;
   modalDialog.value = true;
 
+  id.value = StatusEdit ? data.id : "";
   formData.date = StatusEdit ? data.date : null;
   formData.reference = StatusEdit ? data.reference : "";
   formData.detail = StatusEdit ? data.detail : "";
   formData.refCommandNo = StatusEdit ? data.refCommandNo : "";
   formData.refCommandDate = StatusEdit ? data.refCommandDate : null;
 }
+
 function onClickCloseDialog() {
   modalDialog.value = false;
+  isStatusEdit.value = false;
 }
 
-const modalHistory = ref<boolean>(false);
-function ocClikcHistory() {
+async function getData() {
+  showLoader();
+  await http
+    .get(config.API.profileNewNoPaidByProfileId(profileId.value))
+    .then((res) => {
+      rows.value = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function saveData() {
+  showLoader();
+  await http
+    .post(config.API.profileNewNoPaid, {
+      ...formData,
+      profileId: profileId.value,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      getData();
+      onClickCloseDialog();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function editData() {
+  showLoader();
+  await http
+    .patch(config.API.profileNewNoPaidById(id.value), {
+      ...formData,
+      profileId: undefined,
+    })
+    .then((res) => {
+      success($q, "บันทึกข้อมูลสำเร็จ");
+      getData();
+      onClickCloseDialog();
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+// async function deleteData(id: string) {
+//   showLoader();
+//   await http
+//     .delete(config.API.profileNewNoPaidById(id))
+//     .then((res) => {
+//       success($q, "ลบข้อมูลสำเร็จ");
+//       getData();
+//     })
+//     .catch((e) => {
+//       messageError($q, e);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+// }
+
+function onClickHistory(rowId: string) {
+  id.value = rowId;
   modalHistory.value = true;
 }
+
+onMounted(() => {
+  getData();
+});
 </script>
 <template>
-  <!-- <div class="row items-center q-gutter-sm">
-    <div class="toptitle text-dark row items-center q-py-xs">
-      บันทึกวันที่ไม่ได้รับเงินเดือนฯ
-    </div>
-  </div> -->
   <q-toolbar style="padding: 0px" class="text-primary">
     <q-btn flat round dense icon="add" @click="onClickOpenDialog()">
       <q-tooltip>เพิ่ม</q-tooltip>
@@ -223,6 +259,7 @@ function ocClikcHistory() {
     />
 
     <q-btn-toggle
+      dense
       v-model="modelView"
       toggle-color="grey-4"
       class="no-shadow toggle-borderd"
@@ -261,6 +298,7 @@ function ocClikcHistory() {
     :columns="columns"
     :rows="rows"
     :paging="true"
+    :filter="formFilter.keyword"
     v-model:pagination="pagination"
     :rows-per-page-options="[20, 50, 100]"
     :visible-columns="visibleColumns"
@@ -276,20 +314,22 @@ function ocClikcHistory() {
     </template>
     <template v-slot:body="props" v-if="modelView === 'table'">
       <q-tr :props="props" class="cursor-pointer">
-        <q-td
-          v-for="col in props.cols"
-          :key="col.id"
-          @click.stop.prevent="onClickOpenDialog(true, props.row)"
-        >
-          <div v-if="col.name === 'date'">
-            {{ col.value ? date2Thai(col.value) : "-" }}
-          </div>
-          <div v-else-if="col.name === 'refCommandDate'">
-            {{ col.value ? date2Thai(col.value) : "-" }}
-          </div>
-          <div v-else>{{ col.value ? col.value : "-" }}</div>
+        <q-td v-for="col in props.cols" :key="col.id">
+          <div>{{ col.value ? col.value : "-" }}</div>
         </q-td>
         <q-td auto-width>
+          <q-btn
+            flat
+            dense
+            round
+            class="q-mr-xs"
+            size="14px"
+            color="primary"
+            icon="mdi-pencil-outline"
+            @click="onClickOpenDialog(true, props.row)"
+          >
+            <q-tooltip>แก้ไขข้อมูล</q-tooltip>
+          </q-btn>
           <q-btn
             color="info"
             flat
@@ -297,34 +337,47 @@ function ocClikcHistory() {
             round
             size="14px"
             icon="mdi-history"
-            @click.stop.prevent="ocClikcHistory"
+            @click.stop.prevent="onClickHistory(props.row.id)"
           >
             <q-tooltip>ประวัติบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
           </q-btn>
+          <!-- <q-btn
+            flat
+            dense
+            round
+            size="14px"
+            color="red"
+            icon="mdi-delete"
+            @click="
+              dialogRemove($q, async () => await deleteData(props.row.id))
+            "
+          >
+            <q-tooltip>ลบข้อมูล</q-tooltip>
+          </q-btn> -->
         </q-td>
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
       <div
-        class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+        class="q-pa-xs col-xs-12 col-sm-6 col-md-6 col-lg-3 grid-style-transition"
       >
         <q-card bordered>
-          <q-card-actions align="right">
+          <q-card-actions class="bg-grey-3" align="right">
             <q-btn
               flat
               round
-              color="edit"
-              icon="edit"
-              @click.stop.prevent="onClickOpenDialog(true, props.row)"
+              color="primary"
+              icon="mdi-pencil-outline"
+              @click="onClickOpenDialog(true, props.row)"
             >
               <q-tooltip>แก่ไขข้อมุล</q-tooltip>
             </q-btn>
             <q-btn
               flat
               round
-              color="primary"
+              color="info"
               icon="history"
-              @click.stop.prevent="ocClikcHistory"
+              @click="onClickHistory(props.row.id)"
             >
               <q-tooltip>ประวัติบันทึกวันที่ไม่ได้รับเงินเดือนฯ</q-tooltip>
             </q-btn>
@@ -332,20 +385,17 @@ function ocClikcHistory() {
           <q-separator />
           <q-list>
             <q-item
-              v-for="col in props.cols.filter((col) => col.name !== 'desc')"
+              v-for="(col, index) in props.cols.filter(
+                (col) => col.name !== 'desc'
+              )"
               :key="col.name"
+              :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
             >
-              <q-item-section>
+              <q-item-section class="text-grey-6">
                 <q-item-label>{{ col.label }}</q-item-label>
               </q-item-section>
-              <q-item-section side>
-                <q-item-label caption v-if="col.name === 'date'">
-                  {{ col.value ? date2Thai(col.value) : "-" }}
-                </q-item-label>
-                <q-item-label caption v-else-if="col.name === 'refCommandDate'">
-                  {{ col.value ? date2Thai(col.value) : "-" }}</q-item-label
-                >
-                <q-item-label caption v-else>{{ col.value }}</q-item-label>
+              <q-item-section class="text-dark">
+                <q-item-label>{{ col.value ? col.value : "-" }}</q-item-label>
               </q-item-section>
             </q-item>
           </q-list>
@@ -368,12 +418,11 @@ function ocClikcHistory() {
 
   <q-dialog v-model="modalDialog" persistent>
     <q-card style="width: 600px">
-      <form @submit.prevent.stop="onSubmit">
+      <q-form @submit.prevent greedy @validation-success="onSubmit">
         <DialogHeader
           tittle="บันทึกวันที่ไม่ได้รับเงินเดือนฯ"
           :close="onClickCloseDialog"
         />
-        <!-- วันที่ไม่ได้รับเงินเดือนหรือได้รับเงินเดือนไม่เต็ม หรือวันที่มิได้ประจำปฏิบัติหน้าที่อยู่ในเขตที่ได้มีประกาศใช้กฎอัยการศึก -->
         <q-separator />
         <q-card-section class="q-pa-sm bg-grey-1">
           <div class="row col-12 q-col-gutter-sm">
@@ -399,6 +448,7 @@ function ocClikcHistory() {
                           outlined
                           dense
                           borderless
+                          class="inputgreen"
                           :model-value="date2Thai(formData.date)"
                           :rules="[
                             (val) => !!val || `${'กรุณาเลือก วัน/เดือน/ปี'}`,
@@ -427,6 +477,7 @@ function ocClikcHistory() {
                       lazy-rules
                       borderless
                       v-model="formData.reference"
+                      class="inputgreen"
                       :rules="[(val) => !!val || `${'กรุณากรอกเอกสารอ้างอิง'}`]"
                       hide-bottom-space
                       :label="`${'เอกสารอ้างอิง'}`"
@@ -441,6 +492,7 @@ function ocClikcHistory() {
                       lazy-rules
                       borderless
                       v-model="formData.detail"
+                      class="inputgreen"
                       :rules="[(val) => !!val || `${'กรุณากรอกรายละเอียด'}`]"
                       hide-bottom-space
                       :label="`${'รายละเอียด'}`"
@@ -453,6 +505,7 @@ function ocClikcHistory() {
                       lazy-rules
                       borderless
                       v-model="formData.refCommandNo"
+                      class="inputgreen"
                       hide-bottom-space
                       :label="`${'เลขที่คำสั่ง'}`"
                     >
@@ -478,6 +531,7 @@ function ocClikcHistory() {
                           outlined
                           dense
                           borderless
+                          class="inputgreen"
                           :model-value="
                         formData.refCommandDate == null ? null : date2Thai(formData.refCommandDate as Date)
                         "
@@ -508,11 +562,11 @@ function ocClikcHistory() {
             <q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
           >
         </q-card-section>
-      </form>
+      </q-form>
     </q-card>
   </q-dialog>
 
-  <DialogHisotory v-model:modal="modalHistory" />
+  <DialogHisotory v-model:modal="modalHistory" v-model:id="id" />
 </template>
 
 <style scoped></style>
diff --git a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue
index 86a2cc12c..21b8f1936 100644
--- a/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue
+++ b/src/modules/04_registryNew/components/detail/Salary/02_NotReceiveSalaryHistory.vue
@@ -1,22 +1,33 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, watch } from "vue";
 import { useQuasar } from "quasar";
+import { useCounterMixin } from "@/stores/mixin";
+import http from "@/plugins/http";
+import config from "@/app.config";
 
 import type { QTableProps } from "quasar";
+import type { RowList } from "@/modules/04_registryNew/interface/index/salary";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
-const modal = defineModel<boolean>("modal", { required: true });
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError, date2Thai } = mixin;
 
+const modal = defineModel<boolean>("modal", { required: true });
+const id = defineModel<string>("id", { required: true });
+const filter = ref<string>("");
+const rows = ref<RowList[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
     align: "left",
     label: "วัน เดือน ปี",
     sortable: true,
-    field: "date",
+    field: "detail",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (v) => date2Thai(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -61,6 +72,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "refCommandDate",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (v) => date2Thai(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -83,6 +95,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (v) => date2Thai(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
@@ -96,17 +109,38 @@ const visibleColumns = ref<string[]>([
   "createdFullName",
   "createdAt",
 ]);
-const rows = ref<any>([]);
 const pagination = ref({
   page: 1,
   rowsPerPage: 10,
 });
 
-const filter = ref<string>("");
+function getHistory() {
+  showLoader();
+  http
+    .get(config.API.profileNewNoPaidHisById(id.value))
+    .then((res) => {
+      rows.value = res.data.result;
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
 
 function closeDialog() {
   modal.value = false;
 }
+
+watch(modal, (status) => {
+  if (status == true) {
+    getHistory();
+    filter.value = "";
+  } else {
+    filter.value = "";
+  }
+});
 </script>
 <template>
   <q-dialog v-model="modal" persistent full-width>
@@ -162,20 +196,17 @@ function closeDialog() {
         >
           <template v-slot:header="props">
             <q-tr :props="props">
-              <q-th auto-width />
-              <q-th auto-width />
               <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">
-                <template>
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div class="table_ellipsis">
                   {{ col.value ? col.value : "-" }}
-                </template>
+                </div>
               </q-td>
             </q-tr>
           </template>
diff --git a/src/modules/04_registryNew/interface/index/salary.ts b/src/modules/04_registryNew/interface/index/salary.ts
index a7f3c2fe5..f15c117e3 100644
--- a/src/modules/04_registryNew/interface/index/salary.ts
+++ b/src/modules/04_registryNew/interface/index/salary.ts
@@ -1,20 +1,9 @@
-interface ObjectSalaryRef {
-  date: object | null;
-  posNo: object | null;
-  position: object | null;
-  typePosition: object | null;
-  levelPosition: object | null;
-  salary: object | null;
-  doc: object | null;
-
-  [key: string]: any;
+interface RowList {
+  id: string;
+  date: Date | null;
+  reference: string;
+  detail: string;
+  refCommandNo: string;
+  refCommandDate: Date | null;
 }
-
-interface ObjectReceiveRef {
-  date: object | null;
-  reference: object | null;
-  detail: object | null;
-
-  [key: string]: any;
-}
-export type { ObjectSalaryRef,ObjectReceiveRef };
+export type { RowList };
diff --git a/src/modules/04_registryNew/interface/request/Salary.ts b/src/modules/04_registryNew/interface/request/Salary.ts
index fdaea5559..bb94551a0 100644
--- a/src/modules/04_registryNew/interface/request/Salary.ts
+++ b/src/modules/04_registryNew/interface/request/Salary.ts
@@ -16,4 +16,13 @@ interface FormSalaryNew {
   doc: string;
 }
 
-export type { FormSalaryNew };
+interface RequestNoPaidObject {
+  profileId?: string;
+  date: Date | null;
+  detail: string;
+  reference: string;
+  refCommandDate: Date | null;
+  refCommandNo: string;
+}
+
+export type { FormSalaryNew, RequestNoPaidObject };

From 982969c68fe990d63adc9e1fcb1753b751a96c15 Mon Sep 17 00:00:00 2001
From: puriphatt <puriphat@frappet.com>
Date: Thu, 21 Mar 2024 16:11:45 +0700
Subject: [PATCH 2/2] =?UTF-8?q?=E0=B8=97=E0=B8=B0=E0=B9=80=E0=B8=9A?=
 =?UTF-8?q?=E0=B8=B5=E0=B8=A2=E0=B8=99=E0=B8=9B=E0=B8=A3=E0=B8=B0=E0=B8=A7?=
 =?UTF-8?q?=E0=B8=B1=E0=B8=95=E0=B8=B4(=E0=B9=83=E0=B8=AB=E0=B8=A1?=
 =?UTF-8?q?=E0=B9=88):=20=E0=B9=81=E0=B8=81=E0=B9=89=E0=B9=84=E0=B8=82=20r?=
 =?UTF-8?q?eq=20body,=20=E0=B8=AA=E0=B8=B5=20icon=20=E0=B8=82=E0=B9=89?=
 =?UTF-8?q?=E0=B8=AD=E0=B8=A1=E0=B8=B9=E0=B8=A5=E0=B8=AD=E0=B8=B7=E0=B9=88?=
 =?UTF-8?q?=E0=B8=99=E0=B9=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/Other/01_OtherInformation.vue      | 35 +++++++++----------
 .../Other/01_OtherInformationHistory.vue      |  2 ++
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue b/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue
index 0ec4710b7..7012b3064 100644
--- a/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue
+++ b/src/modules/04_registryNew/components/detail/Other/01_OtherInformation.vue
@@ -55,7 +55,6 @@ const modal = ref<boolean>(false);
 const edit = ref<boolean>(false);
 const modalHistory = ref<boolean>(false);
 
-const isActive = ref<boolean>(true);
 const date = ref<Date | null>(null);
 const detail = ref<string>();
 
@@ -159,7 +158,6 @@ async function saveData() {
   await http
     .post(config.API.profileNewOther, {
       profileId: profileId.value,
-      isActive: isActive.value,
       date: date.value,
       detail: detail.value,
     })
@@ -183,7 +181,6 @@ async function editData() {
   showLoader();
   await http
     .patch(config.API.profileNewOtherById(id.value), {
-      isActive: isActive.value,
       date: date.value,
       detail: detail.value,
     })
@@ -215,21 +212,21 @@ async function getData() {
     });
 }
 
-async function deleteData(id: string) {
-  showLoader();
-  await http
-    .delete(config.API.profileNewOtherById(id))
-    .then((res) => {
-      success($q, "ลบข้อมูลสำเร็จ");
-      getData();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
+// async function deleteData(id: string) {
+//   showLoader();
+//   await http
+//     .delete(config.API.profileNewOtherById(id))
+//     .then((res) => {
+//       success($q, "ลบข้อมูลสำเร็จ");
+//       getData();
+//     })
+//     .catch((e) => {
+//       messageError($q, e);
+//     })
+//     .finally(() => {
+//       hideLoader();
+//     });
+// }
 
 const infoRows = [
   { title: "รายละเอียด", value: "" },
@@ -402,7 +399,7 @@ onMounted(() => {
                 ><q-tooltip>แก้ไข</q-tooltip></q-btn
               >
               <q-btn
-                color="edit"
+                color="info"
                 icon="mdi-history"
                 flat
                 round
diff --git a/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue b/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue
index ef21e9f50..0b2142c41 100644
--- a/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue
+++ b/src/modules/04_registryNew/components/detail/Other/01_OtherInformationHistory.vue
@@ -54,6 +54,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "date",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px; width: 50px;",
+    format: (v) => date2Thai(v),
   },
   {
     name: "detail",
@@ -85,6 +86,7 @@ const columns = ref<QTableProps["columns"]>([
     field: "createdAt",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
+    format: (v) => date2Thai(v),
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },