เพิ่ม ส่งฟิลเตอร์ ค้นหาข้อมูลทะเบียนประวัติ

src/modules/04_registryPerson/views/list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, computed, onMounted } from "vue";
+import { ref, reactive, computed, onMounted, watch } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -27,19 +27,27 @@ const { showLoader, hideLoader, messageError } = useCounterMixin();
 const route = useRoute();
 
 const mode = ref<"table" | "card">("table");
-
+const filterMain = ref<string>("");
 const isShowFilter = ref<boolean>(true);
 const isShowBtnFilter = ref<boolean>(false);
 const empType = ref<string>("officer"); // officer / employee / perm
 
 const searchType = ref<string>("fullName");
-
+const node = ref<any>([]);
+const expanded = ref<any>([]);
 const maxPage = ref<number>(1);
 const total = ref<number>(0);
 const selectNode = ref<boolean>(false);
 
 const dataPersonMain = ref<DataPerson[]>([]);
-
+const nodeData = reactive<any>({
+  page: 1,
+  pageSize: 10,
+  round: "",
+  nodeId: null,
+  node: null,
+  keyword: "",
+});
 const conditionTotal = computed(() => {
   let num: string = "";
   if (store.formFilter.isProbation && store.formFilter.isShowRetire) {
@@ -134,6 +142,10 @@ function fetchDataPerson() {
     queryParams.type = empType.value;
   }
 
+  if(nodeData.node !== null && nodeData.nodeId !== null){
+    queryParams.node = nodeData.node
+    queryParams.nodeId = nodeData.nodeId
+  }
   http
     .get(
       config.API.registryNew(empType.value !== "officer" ? "-employee" : ""),
@@ -295,6 +307,57 @@ function clearSelect(t: string) {
   fetchDataPerson();
 }
 
+async function fetchTree(id: string) {
+  showLoader();
+  http
+    .get(config.API.orgByid(id.toString()))
+    .then((res) => {
+      const data = res.data.result;
+      node.value = data;
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function fetchActive() {
+  showLoader();
+  http
+    .get(config.API.activeOrganization)
+    .then((res) => {
+      const data = res.data.result;
+      fetchTree(data.activeId);
+    })
+    .catch((err) => {
+      messageError($q, err);
+      hideLoader();
+    });
+}
+
+watch(
+  () => selectNode.value,
+  () => {
+    if (selectNode.value) {
+      fetchActive();
+    }
+  }
+);
+
+function updateSelectedTreeMain(data: any) {
+  if (nodeData.node === data.orgLevel && nodeData.nodeId === data.orgTreeId) {
+    nodeData.node = null;
+    nodeData.nodeId = null;
+  } else {
+    nodeData.node = data.orgLevel;
+    nodeData.nodeId = data.orgTreeId;
+  }
+  selectNode.value = false
+  fetchDataPerson()
+}
+
 onMounted(async () => {
   selectType();
 });
@@ -555,7 +618,61 @@ onMounted(async () => {
 
       <q-separator />
 
-      <q-card-section class="q-pa-sm"> </q-card-section>
+      <q-card-section class="q-pa-sm">
+        <div class="row q-col-gutter-sm">
+          <div class="col-12">
+            <q-input dense outlined v-model="filterMain" label="ค้นหา">
+              <template v-slot:append>
+                <q-icon
+                  v-if="filterMain !== ''"
+                  name="clear"
+                  class="cursor-pointer"
+                  @click="filterMain = ''"
+                />
+                <q-icon v-else name="search" color="grey-5" />
+              </template>
+            </q-input>
+          </div>
+          <div class="col-12">
+            <q-tree
+              class="tree-container"
+              dense
+              :nodes="node"
+              node-key="orgTreeName"
+              label-key="labelName"
+              v-model:expanded="expanded"
+              :filter="filterMain"
+              no-results-label="ไม่พบข้อมูลที่ค้นหา"
+              no-nodes-label="ไม่มีข้อมูล"
+              v-model:selected="nodeData.nodeId"
+            >
+              <template v-slot:default-header="prop">
+                <q-item
+                  clickable
+                  @click.stop="updateSelectedTreeMain(prop.node)"
+                  :active="nodeData.nodeId === prop.node.orgTreeId"
+                  active-class="my-list-link text-primary text-weight-medium"
+                  class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                >
+                  <div>
+                    <div class="text-weight-medium">
+                      {{ prop.node.orgTreeName }}
+                    </div>
+                    <div class="text-weight-light text-grey-8">
+                      {{ prop.node.orgCode == null ? null : prop.node.orgCode }}
+                      {{
+                        prop.node.orgTreeShortName == null
+                          ? null
+                          : prop.node.orgTreeShortName
+                      }}
+                    </div>
+                  </div>
+                </q-item>
+              </template>
+            </q-tree>
+          </div>
+        </div>
+      </q-card-section>
     </q-card>
   </q-dialog>
 </template>
@@ -594,4 +711,17 @@ onMounted(async () => {
 .selectS .q-field__control .q-field__append .q-icon {
   color: #ff5722 !important;
 }
+.tree-container {
+  overflow: auto;
+  height: 73vh;
+  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>