เพิ่ม ฟิลเตอร์หน่วยงาน

src/modules/03_logs/components/LogTable.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
-import { cloneVNode, onMounted, ref } from "vue";
+import { cloneVNode, onMounted, ref, reactive } from "vue";
-import type { QTableProps } from "quasar";
+import { useQuasar, type QTableProps } from "quasar";
+import { useRoute } from "vue-router";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
 import { useCounterMixin } from "@/stores/mixin";
 import { useDataStore } from "@/modules/03_logs/stores/main";
 import { storeToRefs } from "pinia";
-import { useRoute } from "vue-router";
 
 import type {
   Pagination,
   ItemsDropdown,
+  DataTree,
+  QueryProfile,
 } from "@/modules/03_logs/interface/index/Main";
 
 import DialogDataDiff from "@/modules/03_logs/components/DialogDataDiff.vue";
@@ -18,9 +23,10 @@ const route = useRoute();
 import type { ResLog } from "@/modules/03_logs/interface/response/Main";
 
 /** use*/
+const $q = useQuasar();
 const storeData = useDataStore();
 const { logData, size, searchAfter, systemName } = storeToRefs(storeData);
-const { date2Thai } = useCounterMixin();
+const { date2Thai, messageError, hideLoader } = useCounterMixin();
 
 const startTime = ref<Date | null>(null); // เวลาเริ่มต้น
 const endTime = ref<Date | null>(null); //เวลาสินสุด
@@ -182,6 +188,66 @@ const itemsDropdown = ref<ItemsDropdown[]>([
 ]);
 
 const statusOpt = ref<string[]>(["info", "warning", "error"]);
+/******* โครงสร้าง *******/
+const filter = ref<string>(""); // ค้นหาข้อมูลรายการโครงสร้าง
+const nodeTree = ref<DataTree[]>([]); // ข้อมูลรายการโครงสร้าง
+const expanded = ref<Array<string>>([]); // เปิดรายการโครงสร้าง
+const orgId = ref<string>(""); // id หน่วยงานที่เลือก
+
+const qureyBody = reactive<QueryProfile>({
+  searchKeyword: "", // คำค้นหา
+  searchField: "fullName", // field ที่ต้องการค้นหา
+  page: 1, // หน้า
+  pageSize: 10, // จำนวนที่ต้องการ
+  id: null, // หน่วยงานที่เลือก
+});
+/**
+ * ฟังก์ชันเลือกหน่วยงาน
+ * @param id หน่วยงานที่เลือก
+ *
+ * กำหนดค่าของ qureyBody ให้เป็นค่า defult และกำหนดค่าของ  qureyBody.id  เป็นหน่วยงานที่เลือก
+ * และดึงข้อมูลรายชื่อคนที่มีสิทธิ์จัดการโครงสร้างในหน่วยงานที่เลือก
+ */
+async function selectedOrg(id: string) {
+  orgId.value = id;
+  qureyBody.id = id;
+  qureyBody.searchKeyword = "";
+  qureyBody.searchField = "fullName";
+  qureyBody.page = 1;
+  await storeData.fetchLog(
+    {
+      rootId: qureyBody.id ?? undefined,
+      size: size.value ?? undefined,
+      search: inputSearch.value ?? undefined,
+      systemName: systemName.value ?? undefined,
+      searchAfter: searchAfter.value ?? undefined,
+      sort: sortTime.value,
+      startDate: new Date(startDate.value) ?? undefined,
+      endDate: new Date(endDate.value) ?? undefined,
+    },
+    true
+  );
+}
+
+/**
+ * ฟังก์ชันดึงข้อมูลโครงสร้าง
+ *
+ * เก็บข้อมูลโครงสร้างไว้ใน nodeTree
+ */
+async function fatchOrg() {
+  await http
+    .get(config.API.permissionOrg)
+    .then(async (res) => {
+      const data = await res.data.result;
+      nodeTree.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+
+      hideLoader();
+    })
+    .finally(() => {});
+}
 
 /**
  * scroll และโหลดข้อมูลรายการ Logs เพิ่ม
@@ -341,6 +407,7 @@ function updateDate() {
 }
 
 onMounted(() => {
+  fatchOrg();
   systemName.value = route.query.system as string;
   const date = new Date();
   date.setHours(0, 0, 0, 0); // ตั้งเวลาเป็น 00:00:00.000
@@ -352,6 +419,64 @@ onMounted(() => {
 
 <template>
   <div class="bg-white q-pa-md">
+    <div class="row q-col-gutter-sm">
+      <div class="col-4">
+        <div class="q-mb-sm">
+          <q-input dense outlined v-model="filter" label="ค้นหา">
+            <template v-slot:append>
+              <q-icon
+                v-if="filter !== ''"
+                name="clear"
+                class="cursor-pointer"
+                @click="filter = ''"
+              />
+              <q-icon v-else name="search" color="grey-5" />
+            </template>
+          </q-input>
+        </div>
+        <div class="bg-white tree-container q-pa-xs">
+          <q-tree
+            class="q-pa-sm q-gutter-sm"
+            dense
+            :nodes="nodeTree"
+            node-key="orgRootName"
+            label-key="orgRootName"
+            :filter="filter"
+            no-results-label="ไม่พบข้อมูลที่ค้นหา"
+            no-nodes-label="ไม่มีข้อมูล"
+            v-model:expanded="expanded"
+          >
+            <template v-slot:default-header="prop">
+              <q-item
+                clickable
+                class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                :active="orgId == prop.node.id"
+                active-class="my-list-link text-primary text-weight-medium"
+                @click.stop="selectedOrg(prop.node.id)"
+              >
+                <div>
+                  <div class="text-weight-medium">
+                    {{ prop.node.orgRootName }}
+                  </div>
+                  <div class="text-weight-light text-grey-8">
+                    {{
+                      prop.node.orgRootCode == null
+                        ? null
+                        : prop.node.orgRootCode
+                    }}
+                    {{
+                      prop.node.orgRootShortName == null
+                        ? null
+                        : prop.node.orgRootShortName
+                    }}
+                  </div>
+                </div>
+              </q-item>
+            </template>
+          </q-tree>
+        </div>
+      </div>
+      <div class="col-8">
         <div class="row no-wrap">
           <div class="row col-7 q-col-gutter-md">
             <div>
@@ -445,7 +570,11 @@ onMounted(() => {
                   "
                   text-color="white"
                   class="q-ma-none text-caption"
-              style="border-radius: 3px; max-width: 60vw; word-wrap: break-word"
+                  style="
+                    border-radius: 3px;
+                    max-width: 60vw;
+                    word-wrap: break-word;
+                  "
                 >
                   {{ scope.opt }}
                 </q-chip>
@@ -529,7 +658,9 @@ onMounted(() => {
                 <q-input
                   dense
                   outlined
-              :model-value="endTime ? date2Thai(endTime, false, true) : null"
+                  :model-value="
+                    endTime ? date2Thai(endTime, false, true) : null
+                  "
                   :label="`${'วันสิ้นสุด'}`"
                   hide-bottom-space
                 >
@@ -549,7 +680,6 @@ onMounted(() => {
             </datepicker>
           </div>
         </div>
-
         <div
           class="q-mt-md"
           style="max-height: 70vh; overflow: scroll"
@@ -609,7 +739,11 @@ onMounted(() => {
               </q-tr>
             </template>
             <template v-slot:body="props">
-          <q-tr :props="props" class="cursor-pointer" style="overflow: scroll">
+              <q-tr
+                :props="props"
+                class="cursor-pointer"
+                style="overflow: scroll"
+              >
                 <q-td v-for="col in props.cols" :key="col.id">
                   <div v-if="col.name === 'username'">
                     <template v-if="props.row.userName && props.row.user">
@@ -689,7 +823,9 @@ onMounted(() => {
                   </div>
 
                   <div v-else class="ellipsis" style="max-width: 10vw">
-                {{ col.value === "" || col.value === null ? "-" : col.value }}
+                    {{
+                      col.value === "" || col.value === null ? "-" : col.value
+                    }}
                     <q-tooltip> {{ col.value }} </q-tooltip>
                   </div>
                 </q-td>
@@ -698,6 +834,8 @@ onMounted(() => {
           </d-table>
         </div>
       </div>
+    </div>
+  </div>
 
   <DialogDataDiff
     v-model:open-dialog="openDialog"
@@ -868,7 +1006,7 @@ onMounted(() => {
   </DialogDataDiff>
 </template>
 
-<style>
+<style scoped>
 .row-color:nth-child(2n + 1) {
   background-color: #eeeeee;
 }
@@ -876,4 +1014,19 @@ onMounted(() => {
 .dp__action_row {
   padding: 2px !important;
 }
+
+.tree-container {
+  overflow: auto;
+  height: 74vh;
+  border: 1px solid #e6e6e7;
+  border-radius: 10px;
+}
+
+.my-list-link {
+  color: rgb(118, 168, 222);
+  border-radius: 5px;
+  background: #a3d3fb48 !important;
+  font-weight: 600;
+  border: 1px solid rgba(175, 185, 196, 0.217);
+}
 </style>

src/modules/03_logs/interface/index/Main.ts

@@ -8,4 +8,33 @@ interface ItemsDropdown {
   val: string;
 }
 
-export type { Pagination, ItemsDropdown };
+interface DataTree {
+  ancestorDNA: string;
+  createdAt: string;
+  createdFullName: string;
+  createdUserId: string;
+  id: string;
+  lastUpdateFullName: string;
+  lastUpdateUserId: string;
+  lastUpdatedAt: string;
+  orgRevisionId: string;
+  orgRootCode: string;
+  orgRootFax: string;
+  orgRootName: string;
+  orgRootOrder: number;
+  orgRootPhoneEx: string;
+  orgRootPhoneIn: string;
+  orgRootRank: string;
+  orgRootRankSub: string;
+  orgRootShortName: string;
+  responsibility: string;
+}
+
+interface QueryProfile {
+  searchKeyword: string;
+  searchField: string;
+  page: number;
+  pageSize: number;
+  id: string | null;
+}
+export type { Pagination, ItemsDropdown,DataTree,QueryProfile };

src/modules/03_logs/stores/main.ts

@@ -36,6 +36,7 @@ export const useDataStore = defineStore("logStore", () => {
       startDate?: Date;
       endDate?: Date;
       searchStatus?: string;
+      rootId?: string;
     },
     isBottom?: boolean
   ) {
@@ -74,6 +75,7 @@ export const useDataStore = defineStore("logStore", () => {
       });
   }
 
+  
   return {
     size,
     logData,