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

<template>
  <div class="page-container">
    <div class="custom-menu-container">
      <div>
        <el-button link @click="handleSave" class="mr-8px"
          ><img class="w-1em mr-4px" :src="saveImg" />保存</el-button
        >
        <el-button link @click="handleSaveZip" 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="历史版本" style="width: 120px" size="small">
          <el-option label="2025.7.16 12:12" value="1"></el-option>
        </el-select>
      </div>
    </div>
    <Sheet
      ref="sheetRef"
      :created="onSheetCreated"
      :workbook="workbook"
      show-export-menu
      show-import-menu
    />
  </div>
  <MindmapModal ref="mindmapModalRef" />
</template>

<script setup lang="ts">
import { onMounted, 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";
import { useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { unzipData, zipData } from "@/utils";

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

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

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

// 正常保存
const handleSave = () => {
  const workbook = sheetRef.value?.getUniverSnapshot();
  console.log(workbook, window.parent);
  try {
    window.parent?.BpmTools?.program(
      {
        interfaceCode: "Common.doSaveOnlineData",
        model: {
          ...workbook,
          bom_id: route.query?.id,
        },
      },
      (res: any) => {
        console.log("保存结果：", res);
        ElMessage.success("保存成功！");
      }
    );
  } catch (error) {
    console.log(error);
    ElMessage.error("保存失败！");
  }
};

// 压缩保存
const handleSaveZip = async () => { 
  const workbook = sheetRef.value?.getUniverSnapshot();
  console.log(JSON.stringify(workbook), window.parent);
  const data = zipData(workbook);
  console.log('压缩之后：', data);
  console.log('解压之后：', unzipData(data));
};

onMounted(() => {
  if (!route.query?.id) return;

  window.parent?.BpmTools?.program(
    {
      interfaceCode: "Common.getBOM2OnlineData",
      bom_id: route.query.id,
    },
    (res: any) => {
      if (res?.code) {
        workbook.value = res?.data;
      }
    }
  );
});
</script>

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

.custom-menu-container {
  position: absolute;
  right: 20px;
  top: 0;
  z-index: 99;
  height: 40px;
  line-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}
</style>