ประวัติตำแหน่ง

src/api/02_organizational/api.organization.ts

@@ -28,4 +28,5 @@ export default {
   orgPosMove: `${orgPos}/move`,
   organizationShortName: `${organization}/sort`,
   organizationPublishGet: `${organization}/get/publish`,
+  orgPosHistory: (id: string) => `${orgPos}/history/${id}`,
 };

src/modules/02_organizationalNew/components/DialogHistoryPos.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { ref, computed, watch } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { QTableProps } from "quasar";
+import type { HistoryPos } from "@/modules/02_organizationalNew/interface/response/organizational";
+
+import Header from "@/components/DialogHeader.vue";
+
+import { useCounterMixin } from "@/stores/mixin";
+const { showLoader, hideLoader, messageError, date2Thai } = useCounterMixin();
+const $q = useQuasar();
+const modal = defineModel<boolean>("modal", { required: true });
+
+const columns = ref<QTableProps["columns"]>([
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: false,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "orgShortName",
+    align: "left",
+    label: "อักษรย่อ",
+    sortable: true,
+    field: "orgShortName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "lastUpdatedAt",
+    align: "left",
+    label: "วันที่แก้ไข",
+    field: "lastUpdatedAt",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNoPrefix",
+    align: "left",
+    label: " Prefix เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posMasterNoPrefix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNo",
+    align: "left",
+    label: "เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posMasterNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+  {
+    name: "posMasterNoSuffix",
+    align: "left",
+    label: "Suffix เลขที่ตำแหน่ง",
+    sortable: true,
+    field: "posMasterNoSuffix",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+]);
+const rows = ref<any>();
+
+const props = defineProps({
+  rowId: {
+    type: String,
+  },
+});
+
+async function fetchHistoryPos(id: string) {
+  showLoader();
+  await http
+    .get(config.API.orgPosHistory(id))
+    .then((res) => {
+      const data: HistoryPos[] = res.data.result;
+      const list = data.map((e: HistoryPos) => ({
+        ...e,
+        lastUpdatedAt: e.lastUpdatedAt ? date2Thai(e.lastUpdatedAt) : "-",
+      }));
+      rows.value = list;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+watch(
+  () => modal.value,
+  () => {
+    modal.value && props.rowId && fetchHistoryPos(props.rowId);
+  }
+);
+</script>
+<template>
+  <q-dialog v-model="modal">
+    <q-card style="width: 700px; max-width: 80vw">
+      <Header
+        :tittle="'ประวัติตำแหน่ง'"
+        :close="
+          () => {
+            modal = false;
+          }
+        "
+      />
+      <q-separator />
+
+      <q-card-section class="q-pt-none q-pa-sm">
+        <d-table
+          flat
+          bordered
+          :rows="rows"
+          :columns="columns"
+          row-key="id"
+          no-data-label="ไม่มีข้อมูล"
+        >
+          <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" class="cursor-pointer">
+              <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                <div v-if="col.name == 'no'">
+                  {{ props.rowIndex + 1 }}
+                </div>
+
+                <div v-else>
+                  {{ col.value }}
+                </div>
+              </q-td>
+            </q-tr>
+          </template>
+        </d-table>
+      </q-card-section>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped></style>

src/modules/02_organizationalNew/components/tableTree.vue

@@ -18,6 +18,7 @@ import DialogFormPosotion from "@/modules/02_organizationalNew/components/Dialog
 import DialogPositionDetail from "@/modules/02_organizationalNew/components/PositionDetail.vue";
 import DialogSort from "@/modules/02_organizationalNew/components/DialogSortPosition.vue";
 import DialogMovePos from "@/modules/02_organizationalNew/components/DialogMovePos.vue";
+import DialogHistoryPos from "@/modules/02_organizationalNew/components/DialogHistoryPos.vue";
 
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
@@ -70,6 +71,12 @@ const listMenu = ref<ListMenu[]>([
     type: "MOVE",
     color: "positive",
   },
+  {
+    label: "ประวัติตำแหน่ง",
+    icon: "history",
+    type: "HISTORY",
+    color: "deep-purple",
+  },
   {
     label: "ดูรายละเอียด",
     icon: "mdi-eye",
@@ -259,12 +266,18 @@ function onClickSort() {
 
 const modalDialogMMove = ref<boolean>(false);
 const typeMove = ref<string>("");
-
 function onClickMovePos(id: string, type: string) {
   modalDialogMMove.value = !modalDialogMMove.value;
   typeMove.value = type;
   rowId.value = id;
 }
+
+const modalDialogHistoryPos = ref<boolean>(false);
+function onClickHistoryPos(id: string) {
+  modalDialogHistoryPos.value = !modalDialogHistoryPos.value;
+  rowId.value = id;
+}
+
 function updatePagination(newPagination: NewPagination) {
   reqMaster.value.pageSize = newPagination.rowsPerPage;
   reqMaster.value.page = 1;
@@ -411,7 +424,11 @@ function updatePagination(newPagination: NewPagination) {
                 <q-list
                   dense
                   style="min-width: 200px"
-                  v-for="(item, index) in listMenu"
+                  v-for="(item, index) in stroe.typeOrganizational === 'draft'
+                    ? listMenu
+                    : listMenu.filter(
+                        (e) => e.type === 'HISTORY' || e.type === 'VIEWDETIAL'
+                      )"
                   :key="index"
                 >
                   <q-item
@@ -426,6 +443,8 @@ function updatePagination(newPagination: NewPagination) {
                         ? onClickDelete(props.row.id)
                         : item.type === 'MOVE'
                         ? onClickMovePos(props.row.id, 'SINGER')
+                        : item.type === 'HISTORY'
+                        ? onClickHistoryPos(props.row.id)
                         : null
                     "
                   >
@@ -561,6 +580,8 @@ function updatePagination(newPagination: NewPagination) {
     :type="typeMove"
     :rowId="rowId"
   />
+
+  <DialogHistoryPos v-model:modal="modalDialogHistoryPos" :rowId="rowId" />
 </template>
 
 <style lang="scss" scoped>

src/modules/02_organizationalNew/interface/response/organizational.ts

@@ -3,8 +3,8 @@ interface DataActive {
   activeName: string;
   draftId: string;
   draftName: string;
-  isPublic: boolean,
+  isPublic: boolean;
-  orgPublishDate: Date | null,
+  orgPublishDate: Date | null;
 }
 
 interface OrgTree {
@@ -80,7 +80,7 @@ interface Position {
 
 interface PosMaster {
   id: string; // id อัตรากำลัง posmaster
-  orgShortname: string;  // อักษรย่อตำแหน่ง
+  orgShortname: string; // อักษรย่อตำแหน่ง
   posMasterNoPrefix: string; // Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
   posMasterNo: number | string; // เลขที่ตำแหน่ง เป็นตัวเลข
   posMasterNoSuffix: string | null; // Suffix หลังเลขที่ตำแหน่ง เช่น ช.
@@ -114,7 +114,7 @@ interface Position2 {
 
 interface PosMaster2 {
   id: string; // id อัตรากำลัง posmaster
-  orgShortname: string;  // อักษรย่อตำแหน่ง
+  orgShortname: string; // อักษรย่อตำแหน่ง
   posMasterNoPrefix: string; // Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
   posMasterNo: number | string; // เลขที่ตำแหน่ง เป็นตัวเลข
   posMasterNoSuffix: string | null; // Suffix หลังเลขที่ตำแหน่ง เช่น ช.
@@ -132,6 +132,15 @@ interface PosMaster2 {
   positions: Position[]; // ตำแหน่ง
 }
 
+interface HistoryPos {
+  id: string; //id node
+  orgShotName: string; //ชื่อย่อส่วนราชการ
+  lastUpdatedAt: Date; //วันที่แก้ไข
+  posMasterNoPrefix: string; //Prefix นำหน้าเลขที่ตำแหน่ง เป็น Optional (ไม่ใช่อักษรย่อของหน่วยงาน/ส่วนราชการ)
+  posMasterNo: number; //เลขที่ตำแหน่ง เป็นตัวเลข
+  posMasterNoSuffix: string; //Suffix หลังเลขที่ตำแหน่ง เช่น ช.
+}
+
 export type {
   DataActive,
   OrgTree,
@@ -144,4 +153,5 @@ export type {
   PosMaster2,
   Position,
   Position2,
+  HistoryPos,
 };