yanfeng-bom-excel-mindmap/src/components/mindmap/Mindmap.vue

<template>
  <div class="mindmap-container" ref="mindmapRef"></div>
</template>

<script setup lang="tsx">
import {
  ref,
  onMounted,
  onBeforeUnmount,
  defineProps,
  watch,
  defineExpose,
  withDefaults,
  defineEmits,
} from "vue";
import MindMap from "simple-mind-map";
import defaultTheme from "./defaultTheme";
// mindmap plugins
import Drag from "simple-mind-map/src/plugins/Drag";
import SearchPlugin from "simple-mind-map/src/plugins/Search";

MindMap.usePlugin(Drag);
MindMap.usePlugin(SearchPlugin);

export type MindMapInstance = {
  getInstance: () => MindMap;
  getActiveNodeList: () => any[];
};

const props = withDefaults(
  defineProps<{
    data?: any;
    readonly?: boolean;
  }>(),
  {
    readonly: false,
  }
);

const emit = defineEmits(["update:data"]);

const mindmapRef = ref<HTMLDivElement | null>(null);
const mindmap = ref<MindMap | null>(null);
const activeNodeList = ref<any[]>([]);
let loaded = false;

onBeforeUnmount(() => {
  mindmap.value?.destroy();
});

watch(
  () => props.data,
  (data) => {
    console.log("data", data);
    data && mindmap.value?.updateData(data);
  },
  {
    deep: true,
    immediate: true,
  }
);

watch(
  () => props.readonly,
  (val) => {
    mindmap.value?.setMode(val ? "readonly" : "edit");
  }
);

onMounted(() => {
  const instance = new MindMap({
    el: mindmapRef.value!,
    data: props.data || {
      data: {
        text: "主物料",
      },
      children: [],
    },
    themeConfig: {
      ...defaultTheme,
      backgroundColor: "#eee",
    },
    // 只读
    readonly: !!props.readonly,
    isUseCustomNodeContent: true,
    customCreateNodeContent: (node: any) => {
      const { sourceData = {} } = node.getData();
      console.log("node", node, sourceData);
      // return你的自定义DOM节点
      let div = document.createElement("div");
      div.className = "mx-12px my-8px";
      div.style = "user-select: none;";
      div.innerHTML = `
        <div class="w-200px text-#666">
          ${
            // <div class="h-60px w-80px overflow-hidden m-auto mb-8px">
            //   <img src="https://picsum.photos/80/60" class="m-auto"/>
            // </div>
            ""
            }
          <div class="border-b border-b-solid flex items-center justify-between pb-4px">
            <span class="text-sm font-light">零件号</span>
            <span class="text-sm font-medium">123445</span>
          </div>
          <div class="border-b border-b-solid flex items-center justify-between pb-4px">
            <span class="text-sm font-light">描述</span>
            <span class="text-sm font-medium">xxxx零件</span>
          </div>
          <div class="border-b flex items-center justify-between pb-4px">
            <span class="text-sm font-light">数量</span>
            <span class="text-sm font-medium">10</span>
          </div>
        </div>`;
      return div;
    },
  } as any);

  // 事件监听
  // 自适应
  instance.on("node_tree_render_end", () => {
    if (loaded) return;
    // @ts-ignore
    instance?.view?.fit();
    loaded = true;
  });
  // 激活节点
  instance.on("node_active", (_node: any, list: any[]) => {
    activeNodeList.value = list;
  });
  // 数据改变
  instance.on("data_change", (data: any) => {
    // console.log("data_change", data);
    emit("update:data", data);
  });
  // 视图数据改变
  // instance.on("view_data_change", (data: any) => {
  //   console.log("view_data_change", data);
  // });

  mindmap.value = instance;
});

// 定义暴露给父组件的方法
defineExpose({
  getInstance: () => mindmap.value,
  getActiveNodeList: () => activeNodeList.value,
});
</script>

<style scoped>
.mindmap-container {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
</style>