บันทึกวันที่ไม่ได้รับเงินดือน

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

@@ -7,6 +7,9 @@ import { useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import { useCounterMixin } from "@/stores/mixin";
+import { useSalaryDataStore } from "@/modules/04_registryPerson/stores/salary";
+
 import type { QTableColumn } from "quasar";
 import type {
   DataPositions,
@@ -22,11 +25,6 @@ import type { ResListSalary } from "@/modules/04_registryPerson/interface/respon
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
-
-// import DialogHistory from "@/modules/04_registryPerson/components/detail/Salary/01_PositionSalaryHistory.vue";
-
-import { useCounterMixin } from "@/stores/mixin";
-import { useSalaryDataStore } from "@/modules/04_registryPerson/stores/salary";
 import DialogPreviewCommand from "@/modules/18_command/components/DialogPreviewCommand.vue";
 
 const { findOrgName } = useCounterMixin();
@@ -341,7 +339,8 @@ const columns = computed<QTableColumn[]>(() => {
     }
   }
   return baseColumns.value.filter(
-    (e: any) => e.name !== "lastUpdateFullName" && e.name !== "lastUpdatedAd"
+    (e: QTableColumn) =>
+      e.name !== "lastUpdateFullName" && e.name !== "lastUpdatedAd"
   );
 });
 const visibleColumns = ref<string[]>(

src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalary.vue

@@ -8,12 +8,12 @@ import { useCounterMixin } from "@/stores/mixin";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-import type { QTableProps } from "quasar";
+import type { QTableColumn } from "quasar";
 import type { RowList } from "@/modules/04_registryPerson/interface/index/salary";
 import type { RequestNoPaidObject } from "@/modules/04_registryPerson/interface/request/Salary";
 
 import DialogHeader from "@/components/DialogHeader.vue";
-import DialogHisotory from "@/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue";
+import DialogHistory from "@/modules/04_registryPerson/components/detail/DialogHistory.vue";
 
 const $q = useQuasar();
 const route = useRoute();
@@ -26,6 +26,7 @@ const {
   success,
   pathRegistryEmp,
   onSearchDataTable,
+  convertDateToAPI,
 } = useCounterMixin();
 
 const id = ref<string>("");
@@ -52,11 +53,7 @@ const formData = reactive<RequestNoPaidObject>({
   refCommandDate: null, //'เอกสารอ้างอิง (ลงวันที่)'
 });
 
-//Table
+const baseColumns = ref<QTableColumn[]>([
-const rows = ref<RowList[]>([]); //รายการ
-const rowsMain = ref<RowList[]>([]); //รายการ
-const keyword = ref<string>(""); //คำค้นหา
-const columns = ref<QTableProps["columns"]>([
   {
     name: "date",
     align: "left",
@@ -102,7 +99,6 @@ const columns = ref<QTableProps["columns"]>([
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
-
   {
     name: "refCommandDate",
     align: "left",
@@ -116,34 +112,92 @@ const columns = ref<QTableProps["columns"]>([
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
   {
-    name: "lastUpdatedAt",
+    name: "lastUpdateFullName",
     align: "left",
-    label: "วันที่แก้ไข",
+    label: "ผู้ดำเนินการ",
     sortable: true,
-    field: "lastUpdatedAt",
+    field: "lastUpdateFullName",
-    format: (v) => date2Thai(v, false, true),
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
     sort: (a: string, b: string) =>
       a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
   },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    sortable: true,
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    format: (v) => date2Thai(v, false, true),
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
 ]);
-const visibleColumns = ref<string[]>([
+const baseVisibleColumns = ref<string[]>([
   "date",
-  "detail",
   "reference",
+  "detail",
   "refCommandNo",
   "refCommandDate",
+  "lastUpdateFullName",
   "lastUpdatedAt",
 ]);
+
+//Table
+const rows = ref<RowList[]>([]); //รายการ
+const rowsMain = ref<RowList[]>([]); //รายการ
+const keyword = ref<string>(""); //คำค้นหา
+const columns = ref<QTableColumn[]>(
+  baseColumns.value.filter((e: QTableColumn) => e.name !== "lastUpdateFullName")
+);
+const visibleColumns = ref<string[]>(
+  baseVisibleColumns.value.filter((e: string) => e !== "lastUpdateFullName")
+);
 const pagination = ref({
   sortBy: "lastUpdatedAt",
 });
 
+const columnsHistory = ref<QTableColumn[]>(baseColumns.value);
+const visibleColumnsHistory = ref<string[]>(baseVisibleColumns.value);
+
 /** funciton ยืนยันการบันทึกข้อมูล*/
 function onSubmit() {
-  dialogConfirm($q, () => {
+  dialogConfirm($q, async () => {
-    isStatusEdit.value ? editData() : saveData();
+    showLoader();
+    const url = isStatusEdit.value
+      ? config.API.profileNewNoPaidById(id.value, empType.value)
+      : config.API.profileNewNoPaid(empType.value);
+
+    const methods = isStatusEdit.value ? http.patch : http.post;
+
+    await methods(url, {
+      ...formData,
+      date: convertDateToAPI(formData.date),
+      refCommandDate: convertDateToAPI(formData.refCommandDate),
+      profileId: isStatusEdit.value
+        ? undefined
+        : empType.value === ""
+        ? profileId.value
+        : undefined,
+      profileEmployeeId: isStatusEdit.value
+        ? undefined
+        : empType.value !== ""
+        ? profileId.value
+        : undefined,
+    })
+      .then(async () => {
+        await getData();
+        success($q, "บันทึกข้อมูลสำเร็จ");
+        onClickCloseDialog();
+      })
+      .catch((err) => {
+        messageError($q, err);
+      })
+      .finally(() => {
+        hideLoader();
+      });
   });
 }
 
@@ -152,7 +206,10 @@ function onSubmit() {
  * @param StatusEdit แก้ไข , เพิ่ม
  * @param data ข้อมูล
  */
-function onClickOpenDialog(StatusEdit: boolean = false, data: any = []) {
+function onClickOpenDialog(
+  StatusEdit: boolean = false,
+  data: RowList = {} as RowList
+) {
   isStatusEdit.value = StatusEdit;
   id.value = StatusEdit ? data.id : "";
   formData.date = StatusEdit ? data.date : null;
@@ -186,55 +243,27 @@ async function getData() {
     });
 }
 
-/** function เพิ่มข้อมูลรายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ*/
-function saveData() {
-  showLoader();
-  http
-    .post(config.API.profileNewNoPaid(empType.value), {
-      ...formData,
-      profileId: empType.value === "" ? profileId.value : undefined,
-      profileEmployeeId: empType.value !== "" ? profileId.value : undefined,
-    })
-    .then(async () => {
-      await getData();
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      onClickCloseDialog();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** function แก้ไขข้อมูลรายการบันทึกวันที่ไม่ได้รับเงินเดือนฯ*/
-function editData() {
-  showLoader();
-  http
-    .patch(config.API.profileNewNoPaidById(id.value, empType.value), {
-      ...formData,
-      profileId: undefined,
-    })
-    .then(async () => {
-      await getData();
-      await success($q, "บันทึกข้อมูลสำเร็จ");
-      onClickCloseDialog();
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
 /** function เปิดข้อมูลประวัติการแก้ไช*/
 function onClickHistory(rowId: string) {
   id.value = rowId;
   modalHistory.value = true;
 }
 
+/** fetch รายการข้อมูลประวัติการแก้ไช*/
+async function fetchDataHistory() {
+  showLoader();
+  try {
+    const res = await http.get(
+      config.API.profileNewNoPaidHisById(id.value, empType.value)
+    );
+    return res.data.result;
+  } catch (err) {
+    messageError($q, err);
+  } finally {
+    hideLoader();
+  }
+}
+
 function serchDataTable() {
   rows.value = onSearchDataTable(
     keyword.value,
@@ -569,7 +598,13 @@ onMounted(() => {
     </q-card>
   </q-dialog>
 
-  <DialogHisotory v-model:modal="modalHistory" v-model:id="id" />
+  <DialogHistory
+    v-model:modal="modalHistory"
+    :visible-columns="visibleColumnsHistory"
+    :title="`ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ`"
+    :columns="columnsHistory"
+    :fetch-data="fetchDataHistory"
+  />
 </template>
 
 <style scoped></style>

src/modules/04_registryPerson/components/detail/Salary/02_NotReceiveSalaryHistory.vue

@@ -1,246 +0,0 @@
-<script setup lang="ts">
-import { ref, watch } from "vue";
-import { useQuasar } from "quasar";
-import { useCounterMixin } from "@/stores/mixin";
-import { useRoute } from "vue-router";
-import http from "@/plugins/http";
-import config from "@/app.config";
-
-import type { QTableProps } from "quasar";
-import type { RowList } from "@/modules/04_registryPerson/interface/index/salary";
-
-import DialogHeader from "@/components/DialogHeader.vue";
-
-const route = useRoute();
-const $q = useQuasar();
-const mixin = useCounterMixin();
-const {
-  showLoader,
-  hideLoader,
-  messageError,
-  date2Thai,
-  pathRegistryEmp,
-  onSearchDataTable,
-} = mixin;
-
-const empType = ref<string>(pathRegistryEmp(route.name?.toString() ?? ""));
-
-const modal = defineModel<boolean>("modal", { required: true });
-const id = defineModel<string>("id", { required: true });
-
-//Table
-const filter = ref<string>(""); //คำค้นหา
-const rows = ref<RowList[]>([]); //รายการข้อมูลประวัติการแก้ไข
-const rowsMain = ref<RowList[]>([]); //รายการข้อมูลประวัติการแก้ไข
-const columns = ref<QTableProps["columns"]>([
-  {
-    name: "date",
-    align: "left",
-    label: "วัน เดือน ปี",
-    sortable: true,
-    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" }),
-  },
-  {
-    name: "reference",
-    align: "left",
-    label: "เอกสารอ้างอิง",
-    sortable: true,
-    field: "reference",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "detail",
-    align: "left",
-    label: "รายละเอียด",
-    sortable: true,
-    field: "detail",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "refCommandNo",
-    align: "left",
-    label: "เลขที่คำสั่ง",
-    sortable: true,
-    field: "refCommandNo",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "refCommandDate",
-    align: "left",
-    label: "เอกสารอ้างอิง (ลงวันที่)",
-    sortable: true,
-    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" }),
-  },
-  {
-    name: "lastUpdateFullName",
-    align: "left",
-    label: "ผู้ดำเนินการ",
-    sortable: true,
-    field: "lastUpdateFullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-  {
-    name: "lastUpdatedAt",
-    align: "left",
-    label: "วันที่แก้ไข",
-    sortable: true,
-    field: "lastUpdatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-    format: (v) => date2Thai(v, false, true),
-    sort: (a: string, b: string) =>
-      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
-  },
-]);
-const visibleColumns = ref<string[]>([
-  "date",
-  "reference",
-  "detail",
-  "refCommandNo",
-  "refCommandDate",
-  "lastUpdateFullName",
-  "lastUpdatedAt",
-]);
-const pagination = ref({
-  sortBy: "lastUpdatedAt",
-});
-
-/** fetch รายการข้อมูลประวัติการแก้ไช*/
-async function getHistory() {
-  showLoader();
-  await http
-    .get(config.API.profileNewNoPaidHisById(id.value, empType.value))
-    .then(async (res) => {
-      rows.value = await res.data.result;
-      rowsMain.value = await res.data.result;
-    })
-    .catch((e) => {
-      messageError($q, e);
-    })
-    .finally(() => {
-      hideLoader();
-    });
-}
-
-/** ฟังก์ชันปิด Popup*/
-function closeDialog() {
-  modal.value = false;
-  rows.value = [];
-}
-
-function serchDataTable() {
-  rows.value = onSearchDataTable(
-    filter.value,
-    rowsMain.value,
-    columns.value ? columns.value : []
-  );
-}
-
-/**
- * ดูการเปลี่ยนแปลงของ modal
- * ถ้า modal เป็น true  เรียก getHistory เพิ่อดึงข้อมูลประวัติการแก้ไข
- */
-watch(modal, (status) => {
-  if (status == true) {
-    getHistory();
-    filter.value = "";
-  } else {
-    filter.value = "";
-  }
-});
-</script>
-<template>
-  <q-dialog v-model="modal" persistent>
-    <q-card style="min-width: 80%">
-      <DialogHeader
-        :tittle="'ประวัติแก้ไขบันทึกวันที่ไม่ได้รับเงินเดือนฯ'"
-        :close="closeDialog"
-      />
-      <q-separator color="grey-4" />
-
-      <q-card-section style="max-height: 60vh" class="scroll">
-        <div class="row q-gutter-sm q-mb-sm">
-          <q-space />
-          <q-input
-            dense
-            outlined
-            v-model="filter"
-            label="ค้นหา"
-            class="q-mr-sm"
-            @keydown.enter.pervent="serchDataTable"
-          >
-            <template v-slot:append>
-              <q-icon name="search" />
-            </template>
-          </q-input>
-
-          <q-select
-            v-model="visibleColumns"
-            multiple
-            outlined
-            dense
-            options-dense
-            :display-value="$q.lang.table.columns"
-            emit-value
-            map-options
-            :options="columns"
-            option-value="name"
-            style="min-width: 140px"
-          />
-        </div>
-        <d-table
-          ref="table"
-          row-key="id"
-          flat
-          bordered
-          dense
-          :columns="columns"
-          :rows="rows"
-          v-model:pagination="pagination"
-          :visible-columns="visibleColumns"
-        >
-          <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-tr>
-          </template>
-          <template v-slot:body="props">
-            <q-tr :props="props">
-              <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                <div class="table_ellipsis">
-                  {{ col.value ? col.value : "-" }}
-                </div>
-              </q-td>
-            </q-tr>
-          </template>
-        </d-table>
-      </q-card-section>
-    </q-card>
-  </q-dialog>
-</template>
-
-<style scoped></style>