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

<template>
  <div class="page-container">
    <div class="header-bar">
      <div>
        <el-button link @click="openMindmap" class="mr-8px"><img class="w-1em mr-4px" :src="saveImg"/>保存</el-button>
        <!-- <el-button link @click="openMindmap"><img class="w-1em mr-4px" :src="mindmapImg"/>思维导图模式</el-button> -->
      </div>
      <div>
        <!-- <el-button link @click="openMindmap" class="mr-8px"><img class="w-1em mr-4px" :src="saveImg"/>项目比对</el-button> -->
        <el-select placeholder="历史版本" class="w-120px" size="small"> 
          <el-option label="2025.7.16 12:12" value="1"></el-option>
        </el-select>
      </div>
    </div>
    <Sheet ref="sheetRef" :created="onSheetCreated" show-export-menu show-import-menu />
  </div>
  <MindmapModal ref="mindmapModalRef"/>
</template>

<script setup lang="ts">
import { ref } from "vue";
import type { UniverExpose } from "@/components/Sheet.vue";
import Sheet from "@/components/Sheet.vue";
import MindmapModal from "./MindmapModal.vue";
// import mindmapImg from "@/assets/mindmap.svg";
import saveImg from "@/assets/save.svg";
import { useEditBomStore } from "@/store/editbom";
import type { FUniver, Univer } from "@univerjs/presets";

const sheetRef = ref<UniverExpose | null>(null);
const mindmapModalRef = ref<any>(null);
const editBomStore = useEditBomStore();

const onSheetCreated = (univer: Univer, univerApi: FUniver) => {
  editBomStore.univer = univer;
  editBomStore.univerApi = univerApi;
}

const openMindmap = () => {
  mindmapModalRef.value.open();
};
</script>

<style lang="less" scoped>
.page-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  justify-content: center;
  height: 100%;
}

.header-bar {
  height: 40px;
  background: #f5f5f5;
  padding: 0 12px;
  line-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}
</style>