hrms-mgt/src/modules/02_organizationalNew/components/mainTree.vue

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import { useQuasar } from "quasar";

import type { ListMenu } from "@/modules/02_organizationalNew/interface/index/Main";

/** importComponents*/
import DialogAgency from "@/modules/02_organizationalNew/components/DialogFormAgency.vue";
import DialogStructureDetail from "@/modules/02_organizationalNew/components/StructureDetail.vue";

/** importStore*/
import { useOrganizational } from "@/modules/02_organizationalNew/store/organizational";

const stroe = useOrganizational();
const $q = useQuasar();

const listAdd = ref<ListMenu[]>([
  {
    label: "เพิ่มส่วนราชการ",
    icon: "add",
    type: "ADD",
    color: "primary",
  },
  {
    label: "แก้ไขหน่วยงาน",
    icon: "edit",
    type: "EDIT",
    color: "info",
  },
  {
    label: "ลบหน่วยงาน",
    icon: "mdi-trash-can-outline",
    type: "DEL",
    color: "red",
  },
  {
    label: "สำเนาหน่วยงาน",
    icon: "content_copy",
    type: "COPY",
    color: "blue",
  },
  {
    label: "ดูประวัติหน่วยงาน",
    icon: "history",
    type: "HISTORY",
    color: "purple",
  },
  {
    label: "จัดลำดับ",
    icon: "filter_list",
    type: "SORT",
    color: "green-7",
  },
  {
    label: "แก้ไขสถานะ",
    icon: "rule",
    type: "STATUS",
    color: "yellow-9",
  },
  {
    label: "ดูรายละเอียด",
    icon: "mdi-eye",
    type: "DETAIL",
    color: "blue-9",
  },
]);

const nodeTEST = defineModel<any>("nodeTree", { required: true });
const filter = ref<string>("");
const nodes = ref<Array<any>>([]);
const lazy = ref(nodes);
const expanded = ref<Array<any>>([]);
const notFound = ref<string>("ไม่พบข้อมูลที่ค้นหา");
const noData = ref<string>("ไม่มีข้อมูล");
const selected = ref("");
const orgLevel = ref<string>("");

const filterData = (node: any, filter: string) => {
  // ให้ทาง API ค้นหาให้
  nodes.value = [
    {
      organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
      organizationId: "3b86d275-8259-427c-8da7-12813fe482eb",
      organizationLevel: 0,
      lazy: true,
      children: [
        {
          organizationName: "กองบริหารทั่วไป",
          organizationId: "3486d275-8159-427c-8da7-12813fe482eb",
          organizationLevel: 1,
        },
        {
          organizationName: "กองสรรหาบุคคล",
          organizationId: "3486d275-8259-427c-8da7-12813fe400eb",
          organizationLevel: 1,
        },
        {
          organizationName: "สถาบันพัฒนาทรัพยากรบุคคลกรุงเทพมหานคร",
          organizationId: "3486d275-8259-437c-8da7-12813fe482eb",
          organizationLevel: 1,
          children: [
            {
              organizationName: "ฝ่ายบริหารงานทั่วไป",
              organizationId: "3486d275-8259-427c-8da7-12813ff482eb",
              organizationLevel: 2,
            },
            {
              organizationName: "ส่วนส่งเสริมการพัฒนาทรัพยากรบุคคล",
              organizationId: "3486d275-8259-427c-8da7-12833fe482eb",
              organizationLevel: 2,
            },
          ],
        },
      ],
    },
    {
      organizationName: "สำนักปลัดกรุงเทพมหานคร",
      organizationId: "3b86d275-8259-427c-8da7-12813fe482ec",
      organizationLevel: 0,
    },
  ];

  // expanded จาก id ได้
  expanded.value = [
    "3b86d275-8259-427c-8da7-12813fe482eb",
    "3486d275-8259-437c-8da7-12813fe482eb",
  ];

  return node.organizationName && node.organizationName.indexOf(filter) > -1;
};

const updateSelected = (target: any) => {
  console.log("updateSelected===>", target);
};

const onLazyLoad = (details: { node: any; key: any; done: any; fail: any }) => {
  console.log(details.node.organizationName);

  if (details.node.organizationId == "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01") {
    details.done([
      {
        organizationName: "กองบริหารทั่วไป",
        organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx11",
        organizationLevel: 1,
        organizationNo: "00011",
      },
      {
        organizationName: "กองสรรหาบุคคล",
        organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx12",
        organizationLevel: 1,
        organizationNo: "00011",
      },
      {
        organizationName: "สถาบันพัฒนาทรัพยากรบุคคลกรุงเทพมหานคร",
        organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx13",
        organizationLevel: 1,
        organizationNo: "00011",
        children: [
          {
            organizationName: "ฝ่ายบริหารงานทั่วไป",
            organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxx131",
            organizationLevel: 2,
            organizationNo: "00011",
            children: [
              {
                organizationName: "กลุ่มงานวิเคราะห์การพัฒนาทรัพยากรบุคคล",
                organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxx1311",
                organizationLevel: 3,
              },
            ],
          },
          {
            organizationName: "ส่วนส่งเสริมการพัฒนาทรัพยากรบุคคล",
            organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx14",
            organizationLevel: 2,
          },
        ],
      },
    ]);
  } else if (
    details.node.organizationId == "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02"
  ) {
    details.done([
      {
        organizationName: "สำนักงานการเจ้าหน้าที่",
        organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx21",
        organizationLevel: 1,
      },
    ]);
  }
  // }, 500);
};

const breakLoop = ref<boolean>(false);
async function edit(selected: string) {
  console.log("edit node tree id: " + selected);
  breakLoop.value = false;

  // Usage
  const targetNodeId = selected;
  const replacementNode = {
    organizationName: `ชื่อใหม่ ${selected}`,
    organizationId: selected,
  };

  for (let index = 0; index < nodes.value.length; index++) {
    const element = nodes.value[index];
    searchAndReplace(element, targetNodeId, replacementNode);
    console.log("index===>", index);
    console.log("breakLoop===>", breakLoop.value);
    if (breakLoop.value) break;
  }
}

function searchAndReplace(
  treeNode: any,
  organizationId: any,
  replacementObject: any
) {
  if (treeNode.organizationId === organizationId) {
    Object.assign(treeNode, replacementObject);
    breakLoop.value = true;
  } else if (treeNode.children) {
    for (const child of treeNode.children) {
      searchAndReplace(child, organizationId, replacementObject);
    }
  }
}

const dialogAgency = ref<boolean>(false);
function onClickAgency(level: string) {
  dialogAgency.value = !dialogAgency.value;
  orgLevel.value = level;
}

const dialogDetail = ref<boolean>(false);
function onClickDetail() {
  console.log(dialogDetail.value);

  dialogDetail.value = !dialogDetail.value;
}

watch(
  () => nodeTEST.value,
  () => {
    nodes.value = nodeTEST.value;
  }
);

onMounted(async () => {
  // setTimeout(() => {
  //   console.log(nodessd.value);
  // }, 200);
  // nodes.value = [
  //   {
  //     organizationName: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
  //     organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx01",
  //     organizationLevel: 0,
  //     lazy: true,
  //   },
  //   {
  //     organizationName: "สำนักปลัดกรุงเทพมหานคร",
  //     organizationId: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx02",
  //     organizationLevel: 0,
  //     lazy: true,
  //   },
  //   // {
  //   //   organizationName: "data empty",
  //   //   lazy: true,
  //   // },
  //   // {
  //   //   organizationName: "Node is not expandable",
  //   //   expandable: false,
  //   //   children: [{ organizationName: "Some node" }],
  //   // },
  // ];
});
</script>

<template>
  <div class="col-12 q-py-md q-px-lg">
    <div class="q-gutter-md">
      <div class="row q-col-gutter-sm">
        <div class="col-2" v-if="stroe.typeOrganizational === 'draft'">
          <q-btn
            dense
            flat
            round
            color="primary"
            icon="add"
            @click="onClickAgency('DEPARTMENT')"
          >
            <q-tooltip>เพิ่มหน่วยงาน</q-tooltip>
          </q-btn>
        </div>

        <div
          :class="stroe.typeOrganizational === 'draft' ? 'col-10' : '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 = ''"
              />
            </template>
          </q-input>
        </div>
      </div>
      <div
        class="bg-white"
        style="
          height: 60vh;
          border: 1px solid rgb(210, 210, 210);
          border-radius: 10px;
        "
      >
        <q-tree
          class="q-pa-md q-gutter-sm"
          dense
          default-expand-all
          selected-color="primary"
          :nodes="lazy"
          node-key="organizationId"
          label-key="organizationName"
          :filter="filter"
          :no-results-label="notFound"
          :no-nodes-label="noData"
          :filter-method="filterData"
          v-model:expanded="expanded"
          v-model:selected="selected"
          @update:selected="updateSelected"
          @lazy-load="onLazyLoad"
        >
          <template v-slot:default-header="prop">
            {{ prop.node.organizationName }}

            <q-btn
              flat
              dense
              icon="mdi-dots-vertical"
              class="q-pa-none q-ml-xs"
              v-if="stroe.typeOrganizational === 'draft'"
              color="grey-13"
            >
              <q-menu>
                <q-list
                  dense
                  v-for="(item, index) in listAdd"
                  :key="index"
                  style="min-width: 100px"
                >
                  <q-item
                    clickable
                    v-close-popup
                    @click="
                      item.type === 'EDIT'
                        ? edit(prop.node.organizationId)
                        : item.type === 'ADD'
                        ? onClickAgency('TEST')
                        : item.type === 'DETAIL'
                        ? onClickDetail()
                        : null
                    "
                  >
                    <q-item-section avatar>
                      <q-icon :color="item.color" :name="item.icon" />
                    </q-item-section>
                    <q-item-section>{{ item.label }}</q-item-section>
                  </q-item>
                </q-list>
              </q-menu>
            </q-btn>
          </template>

          <template v-slot:default-body="prop">
            <div v-if="prop.node.organizationNo">
              <span class="text-grey-13">{{ prop.node.organizationNo }}</span>
            </div>
          </template>
        </q-tree>
      </div>
    </div>
  </div>

  <!-- เพิ่มหน่วยงาน -->
  <DialogAgency
    :modal="dialogAgency"
    :close="onClickAgency"
    v-model:orgLevel="orgLevel"
  />

  <!-- รายละเอียดโครงสร้าง -->
  <DialogStructureDetail v-model:structure-detail="dialogDetail" />
</template>

<style scoped></style>