API ดูประวัติโครงสร้าง

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

@@ -12,5 +12,6 @@ export default {
 
   orgSetDateTime:(id:string) => `${organization}/set/publish/${id}`,
   organizationHistoryNew: `${organization}/history`,
+  organizationHistoryPostNew: `${organization}/history/publish`,
   organizationShortName: `${organization}/sort`,
 };

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

@@ -3,7 +3,7 @@ import { ref, reactive, watch } from "vue";
 import { useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
 import type { QTableProps } from "quasar";
-import type { HistoryType } from "@/modules/02_organizationalNew/interface/index/Main";
+import type { HistoryPostType } from "@/modules/02_organizationalNew/interface/index/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 import Modal from "@/modules/05_placement/components/AppointEmployee/Modal.vue";
@@ -12,15 +12,14 @@ import { getDateMeta } from "@fullcalendar/core/internal";
 import http from "@/plugins/http";
 import config from "@/app.config";
 
-const props = defineProps({
+const modal = defineModel<boolean>("history", { required: true });
-  modal: Boolean,
+const type = defineModel<number>("type", { required: true });
-  close: Function,
+const orgId = defineModel<string>("orgId", { required: true });
-});
 
 const $q = useQuasar();
 const mixin = useCounterMixin();
 const { showLoader, hideLoader, messageError, date2Thai } = mixin;
-const rows = ref<HistoryType[]>([]);
+const rows = ref<HistoryPostType[]>([]);
 
 const columns = ref<QTableProps["columns"]>([
   {
@@ -41,6 +40,16 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
+  {
+    name: "name",
+    align: "left",
+    label: "",
+    sortable: true,
+    field: "name",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+  },
+
   {
     name: "lastUpdatedAt",
     align: "left",
@@ -50,79 +59,55 @@ const columns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
-    name: "orgRevisionIsCurrent",
-    align: "center",
-    label: "โครงสร้างที่ใช้อยู่",
-    sortable: false,
-    field: "orgRevisionIsCurrent",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "orgRevisionIsDraft",
-    align: "center",
-    label: "โครงสร้างแบบร่าง",
-    sortable: false,
-    field: "orgRevisionIsDraft",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "orgRevisionCreatedAt",
-    align: "left",
-    label: "วันเริ่มใช้โครงสร้าง",
-    sortable: true,
-    field: "orgRevisionCreatedAt",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
 ]);
 const visibleColumns = ref<string[]>([
   "no",
+  "name",
   "orgRevisionName",
-  "orgRevisionIsCurrent",
+  "lastUpdatedAt",
-  "orgRevisionIsDraft",
-  "orgRevisionCreatedAt",
 ]);
 
-function getDate() {
+function postData() {
-  showLoader()
+  showLoader();
   http
-  .get(config.API.organizationHistoryNew)
+    .post(config.API.organizationHistoryPostNew, {
-  .then((res)=>{
+      id: orgId.value,
-      const dataList = res.data.result
+      type: type.value,
-      dataList.map((item:HistoryType)=>(
+    })
-        {
+    .then((res) => {
-          orgRevisionId:item.orgRevisionId ? item.orgRevisionId:'-',
+      const dataList = res.data.result;
-          orgRevisionName:item.orgRevisionName ? item.orgRevisionName:'-',
+      dataList.map((item: HistoryPostType) => ({
-          orgRevisionIsCurrent:item.orgRevisionIsCurrent ? item.orgRevisionIsCurrent:'-',
+        id: item.id ? item.id : "-",
-          orgRevisionIsDraft:item.orgRevisionIsDraft ? item.orgRevisionIsDraft:'-',
+        name: item.name ? item.name : "-",
-          orgRevisionCreatedAt:item.orgRevisionCreatedAt ? date2Thai(item.orgRevisionCreatedAt as Date):'-',
+        lastUpdatedAt: item.lastUpdatedAt ? date2Thai(item.lastUpdatedAt,false,true) : "-",
-        }
+        orgRevisionName: item.orgRevisionName ? item.orgRevisionName : "-",
-      ))
+      }));
-      rows.value = dataList
+      rows.value = dataList;
-  }).catch((e)=>{
+    })
-    messageError($q,e)
+    .catch((e) => {
-  })
+      messageError($q, e);
-  .finally(()=>{
+    })
-    hideLoader()
+    .finally(() => {
-  })
+      hideLoader();
+    });
 }
 watch(
-  () => props.modal,
+  () => modal.value,
   () => {
-    if (props.modal == true) {
+    if (modal.value == true) {
-      getDate();
+      postData();
     }
   }
 );
 </script>
 <template>
   <template>
-    <q-dialog v-model="props.modal" persistent>
+    <q-dialog v-model="modal" persistent>
       <q-card style="min-width: 40vw">
-        <DialogHeader :tittle="`ประวัติโครงสร้าง`" :close="props.close" />
+        <DialogHeader
+          :tittle="type == 0 ? `ประวัติหน่อยงาน` : `ประวัติส่วนราชการ`"
+          :close="() => (modal = false)"
+        />
         <q-separator />
 
         <q-card-section>
@@ -148,6 +133,13 @@ watch(
                       :props="props"
                       style="color: #000000; font-weight: 500"
                     >
+                      <span
+                        v-if="col.name === 'name'"
+                        class="text-weight-medium"
+                      >
+                        {{ type === 0 ? "ชื่อหน่อยงาน" : "ส่วนราชการ" }}
+                      </span>
+
                       <span class="text-weight-medium">{{ col.label }}</span>
                     </q-th>
                   </q-tr>
@@ -165,15 +157,31 @@ watch(
 
                       <div v-else-if="col.name == 'orgRevisionIsCurrent'">
                         <q-icon
-                          :name="props.row.orgRevisionIsCurrent == true ? 'mdi-check':''"
+                          :name="
-                          :color="props.row.orgRevisionIsCurrent == true ? 'positive':''"
+                            props.row.orgRevisionIsCurrent == true
+                              ? 'mdi-check'
+                              : ''
+                          "
+                          :color="
+                            props.row.orgRevisionIsCurrent == true
+                              ? 'positive'
+                              : ''
+                          "
                           class="text-h5"
                         />
                       </div>
                       <div v-else-if="col.name == 'orgRevisionIsDraft'">
                         <q-icon
-                          :name="props.row.orgRevisionIsDraft == true ? 'mdi-check':''"
+                          :name="
-                          :color="props.row.orgRevisionIsDraft == true ? 'positive':''"
+                            props.row.orgRevisionIsDraft == true
+                              ? 'mdi-check'
+                              : ''
+                          "
+                          :color="
+                            props.row.orgRevisionIsDraft == true
+                              ? 'positive'
+                              : ''
+                          "
                           class="text-h5"
                         />
                       </div>

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

@@ -49,7 +49,7 @@ function save() {
     const data = rows.value;
     const dataId = data.map((item: any) => item.orgTreeId);
     http
-      .put(config.API.organizationShortName, {
+      .post(config.API.organizationShortName, {
         id: data[0].orgLevel === 0 ? data[0].orgRevisionId : data[0].orgRootId,
         type: data[0].orgLevel,
         sortId: dataId,

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

@@ -11,7 +11,7 @@ import type { OrgTree } from "@/modules/02_organizationalNew/interface/response/
 import DialogAgency from "@/modules/02_organizationalNew/components/DialogFormAgency.vue";
 import DialogStructureDetail from "@/modules/02_organizationalNew/components/StructureDetail.vue";
 import DialogSortAgency from "@/modules/02_organizationalNew/components/DialogSortAgency.vue";
-
+import DialogHistory from "@/modules/02_organizationalNew/components/DialogHistory.vue";
 /** importStore*/
 import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";
 import { useCounterMixin } from "@/stores/mixin";
@@ -81,7 +81,7 @@ const listAdd = ref<ListMenu[]>([
 
 const nodeTEST = defineModel<OrgTree[]>("nodeTree", { default: [] });
 const filter = ref<string>("");
-const level = ref<number>(0);
+
 const nodes = ref<Array<OrgTree>>([]);
 const dataSort = ref<Array<any>>([]);
 const lazy = ref(nodes);
@@ -90,6 +90,8 @@ const notFound = ref<string>("ไม่พบข้อมูลที่ค้
 const noData = ref<string>("ไม่มีข้อมูล");
 const selected = ref("");
 const orgLevel = ref<number>(0);
+const type = ref<number>(0);
+const orgId = ref<string>("");
 
 const updateSelected = (target: any) => {
   console.log("updateSelected===>", target);
@@ -168,6 +170,7 @@ function deleteNode(treeNode: any, organizationId: any): boolean {
   return false;
 }
 
+const modalHistory = ref<boolean>(false);
 const modalSortAgency = ref<boolean>(false);
 const dialogAgency = ref<boolean>(false);
 const actionType = ref<string>("");
@@ -254,6 +257,13 @@ async function onClickSort(id: string) {
     }
   }
 }
+
+function onClickHistory(level: number, id: string) {
+  type.value = level;
+  orgId.value = id;
+  modalHistory.value = true;
+}
+
 watch(
   () => nodeTEST.value,
   () => {
@@ -370,6 +380,11 @@ onMounted(async () => {});
                         ? onClickDel(prop.node.orgLevel, prop.node.orgTreeId)
                         : item.type === 'SORT'
                         ? onClickSort(prop.node.orgRootId)
+                        : item.type === 'HISTORY'
+                        ? onClickHistory(
+                            prop.node.orgLevel,
+                            prop.node.orgTreeId
+                          )
                         : null
                     "
                   >
@@ -498,6 +513,11 @@ onMounted(async () => {});
     v-model:sort-agency="modalSortAgency"
     v-model:data="dataSort"
   />
+  <DialogHistory
+    v-model:history="modalHistory"
+    v-model:type="type"
+    v-model:org-id="orgId"
+  />
 </template>
 
 <style scoped></style>

src/modules/02_organizationalNew/interface/index/Main.ts

@@ -74,6 +74,12 @@ interface HistoryType {
   orgRevisionIsDraft: boolean;
   orgRevisionCreatedAt: Date | string;
 }
+interface HistoryPostType {
+  id: string;
+  name: string;
+  lastUpdatedAt: Date;
+  orgRevisionName: string;
+}
 
 interface FormPositionSelect {
   positionId: string,
@@ -109,5 +115,6 @@ export type {
   HistoryType,
   ListMenu,
   FormPositionSelect,
-  RowDetailPositions
+  RowDetailPositions,
+  HistoryPostType
 };