hrms-mgt/src/modules/16_positionEmployee/components/TreeMain.vue

<script setup lang="ts">
import { ref, watch } from "vue";
import { useQuasar } from "quasar";
import http from "@/plugins/http";
import config from "@/app.config";

/** importType*/
import type { OrgTree } from "@/modules/16_positionEmployee/interface/response/organizational";
import type { DataTree } from "@/modules/16_positionEmployee/interface/index/organizational";

/** importStore*/
import { usePositionEmp } from "@/modules/16_positionEmployee/store/organizational";
import { useCounterMixin } from "@/stores/mixin";

/** use*/
const $q = useQuasar();
const store = usePositionEmp();
const {} = useCounterMixin();

/** props*/
const nodeMain = defineModel<OrgTree[]>("nodeTree", { default: [] });
const nodeId = defineModel<string>("nodeId", { required: true });
const shortName = defineModel<string>("shortName", { required: true });
const props = defineProps({
  fetchDataTree: {
    type: Function,
    require: true,
  },
  fetchDataTable: {
    type: Function,
    require: true,
  },
});

const filter = ref<string>(""); //ค้าหาข้อมูลโครงสร้าง
const nodes = ref<Array<OrgTree>>([]); //ข้อมูลโครงสร้าง
const lazy = ref(nodes);
const expanded = ref<Array<string[]>>([]);

/**
 * funtion เลือกข้อมูล Tree
 * @param data ข่อมูล Tree
 */
function updateSelected(data: DataTree) {
  shortName.value = data.orgTreeShortName;

  if (!store.treeId || store.treeId != data.orgTreeId) {
    store.treeId = data.orgTreeId;
    store.level = data.orgLevel;

    nodeId.value = data.orgTreeId ? data.orgTreeId : "111";

    data.orgTreeId &&
      props.fetchDataTable?.(data.orgTreeId, data.orgLevel, true);
    /** ดึงข้อมูลสถิติจำนวนด้านบน*/
    http
      .post(config.API.orgSummaryEmp, {
        id: data.orgTreeId, //*Id node
        type: data.orgLevel, //*ประเภทnode
        isNode: false, //*นับทั้ง node ไหม
      })
      .then(async (res: any) => {
        const data = await res.data.result;
        if (data) {
          store.getSumPosition({
            totalPosition: data.totalPosition,
            totalPositionCurrentUse: data.totalPositionCurrentUse,
            totalPositionCurrentVacant: data.totalPositionCurrentVacant,
            totalPositionNextUse: data.totalPositionNextUse,
            totalPositionNextVacant: data.totalPositionNextVacant,
            totalRootPosition: data.totalPosition,
            totalRootPositionCurrentUse: data.totalPositionCurrentUse,
            totalRootPositionCurrentVacant: data.totalPositionCurrentVacant,
            totalRootPositionNextUse: data.totalPositionNextUse,
            totalRootPositionNextVacant: data.totalPositionNextVacant,
          });
        }
      });
  }
}

watch(
  () => nodeMain.value,
  () => {
    nodes.value = nodeMain.value;
  }
);
</script>

<template>
  <div class="col-12 q-py-sm q-px-sm">
    <div class="q-gutter-sm">
      <div class="row q-col-gutter-sm q-pl-sm">
        <div class="col-12">
          <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 name="search" color="grey-5" />
            </template>
          </q-input>
        </div>
      </div>
      <div class="bg-white tree-container q-pa-xs">
        <q-tree
          class="q-pa-sm q-gutter-sm"
          dense
          default-expand-all
          :nodes="lazy"
          node-key="orgTreeId"
          label-key="labelName"
          :filter="filter"
          no-results-label="ไม่พบข้อมูลที่ค้นหา"
          no-nodes-label="ไม่มีข้อมูล"
          v-model:expanded="expanded"
        >
          <template v-slot:default-header="prop">
            <q-item
              clickable
              :active="nodeId == prop.node.orgTreeId"
              @click.stop="updateSelected(prop.node)"
              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>
  </div>
</template>

<style scoped>
.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>