yanfeng-bom-excel-mindmap/src/pages/excel/MindmapModal.vue

<template>
  <div v-if="visible" class="mindmap-modal">
    <div class="mindmap-modal_header">
      <div class="text-xl font-semibold">查看“BOM物料名称”</div>
      <el-button
        v-if="!hideClose"
        link
        @click="close"
        :icon="Close"
        style="font-size: 1.2em"
      ></el-button>
    </div>
    <div class="mindmap-modal_tool">
      <el-form ref="formRef" :model="formData" class="flex items-center" inline>
        <el-form-item label="收缩至" prop="level" class="mr-12px">
          <el-select
            v-model="formData.level"
            placeholder="请选择"
            style="width: 120px"
            @change="changeLevel"
          >
            <el-option v-for="item in 10" :key="item" :label="`${item}级`" :value="item" />
          </el-select>
        </el-form-item>
        <el-form-item label="布局" prop="layout" class="mr-12px">
          <el-select
            v-model="formData.layout"
            placeholder="请选择"
            style="width: 120px"
            @change="changeLayout"
          >
            <el-option label="水平" value="logicalStructure" />
            <el-option label="垂直" value="organizationStructure" />
          </el-select>
        </el-form-item>
        <el-form-item label="搜索" props="search">
          <div class="flex">
            <el-input v-model="formData.search" style="width: 120px" />
            <el-button
              class="ml-12px"
              :icon="Search"
              @click="handleSearch"
            ></el-button>
          </div>
        </el-form-item>
      </el-form>
      <div class="flex gap-4px">
        <el-tooltip content="添加">
          <el-button
            type="default"
            circle
            :icon="CirclePlusFilled"
            @click="addNode"
          />
        </el-tooltip>
        <el-tooltip content="详情">
          <el-button
            type="default"
            circle
            :icon="InfoFilled"
            @click="openNodeDetail"
          />
        </el-tooltip>
        <el-tooltip content="自适应">
          <el-button type="default" circle @click="autoFit">
            <img :src="AutoIcon" style="width: 1em" />
          </el-button>
        </el-tooltip>
        <el-tooltip content="定位到根节点">
          <el-button type="default" circle :icon="Aim" @click="zoomToRoot" />
        </el-tooltip>
        <el-tooltip content="放大">
          <el-button
            type="default"
            circle
            :icon="ZoomIn"
            @click="handleZoom(1)"
          />
        </el-tooltip>
        <el-tooltip content="缩小">
          <el-button
            type="default"
            circle
            :icon="ZoomOut"
            @click="handleZoom(0)"
          />
        </el-tooltip>
      </div>
    </div>

    <div class="mindmap-modal_body">
      <Mindmap v-model:data="editBomStore.mindmapData" ref="mindmapRef" />
    </div>
  </div>

  <ConfigDrawer ref="configDrawerRef" />
</template>

<script setup lang="ts">
import { ref, defineExpose, reactive, defineProps } from "vue";
import {
  Aim,
  CirclePlusFilled,
  Close,
  InfoFilled,
  Search,
  ZoomIn,
  ZoomOut,
} from "@element-plus/icons-vue";
import type { MindMapInstance } from "@/components/mindmap/Mindmap.vue";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { bfsWalk } from "simple-mind-map/src/utils";
import { useEditBomStore } from "@/store/editbom";

import Mindmap from "@/components/mindmap/Mindmap.vue";
import ConfigDrawer from "./ConfigDrawer.vue";
import AutoIcon from "@/assets/auto.svg";

const props = defineProps<{
  defaultOpen?: boolean;
  hideClose?: boolean;
}>();

const visible = ref(!!props.defaultOpen);
const mindmapRef = ref<MindMapInstance>();
const configDrawerRef = ref();
const formRef = ref<FormInstance>();
const editBomStore = useEditBomStore();
const formData = reactive({
  level: undefined,
  layout: "logicalStructure",
  search: "",
});

// 定位到根节点
const zoomToRoot = () => {
  const mindmap = mindmapRef.value?.getInstance();
  mindmap?.renderer?.setRootNodeCenter();
};

// 切换布局
const changeLayout = (value: string) => {
  const mindmap = mindmapRef.value?.getInstance();
  mindmap?.setLayout(value);
  let fited = false;
  mindmap?.on("node_tree_render_end", () => {
    // @ts-ignore
    !fited && mindmap?.view?.fit();
    fited = true;
  });
};

// 切换层级
const changeLevel = (level: number) => {
  const mindmap = mindmapRef.value?.getInstance();
  mindmap?.execCommand('UNEXPAND_TO_LEVEL', level);
}

const autoFit = () => {
  const mindmap = mindmapRef.value?.getInstance();
  // @ts-ignore
  mindmap?.view?.fit();
};

// 节点详情
const openNodeDetail = () => {
  const activeList = mindmapRef.value?.getActiveNodeList();
  if (!activeList?.length) {
    ElMessage.warning("请选择节点");
    return;
  }
  configDrawerRef.value.open();
};

// 缩放
const handleZoom = (num: number) => {
  const mindmap = mindmapRef.value?.getInstance();
  if (num) {
    // @ts-ignore
    mindmap?.view?.enlarge();
  } else {
    // @ts-ignore
    mindmap?.view?.narrow();
  }
};

// 添加节点
const addNode = () => {
  const mindmap = mindmapRef.value?.getInstance();
  const activeList = mindmapRef.value?.getActiveNodeList();
  if (!activeList?.length) {
    ElMessage.warning("请选择父节点");
    return;
  }

  mindmap?.execCommand("INSERT_CHILD_NODE");
};

// 搜索
const handleSearch = () => {
  const result = [];
  const mindmap = mindmapRef.value?.getInstance();
  const data = mindmap?.getData(false);
  console.log(data);
  // TODO: 处理搜索结果
  bfsWalk(data, (node: any) => {
    console.log('遍历节点：', node);
    if(node.data?.a?.includes(formData.search)) {
      result.push(node);
    }
  });
};

// 打开弹窗
const open = () => {
  visible.value = true;
};

// 关闭弹窗
const close = () => {
  formRef.value?.resetFields();
  visible.value = false;
};

defineExpose({
  open,
  close,
});
</script>

<style lang="less" scoped>
.mindmap-modal {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  &_header {
    height: 40px;
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    line-height: 40px;
  }
  &_tool {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }
  &_body {
    flex: 1;
    width: 100%;
    background: #fafafa;
  }
}

:deep(*) {
  .el-form-item {
    margin-top: 12px;
    margin-bottom: 12px;
  }
}
</style>