dySdDesignerVue_DesignModule/src/views/Editor/computer.vue

<!--
 * @Author: June 1601745371@qq.com
 * @Date: 2024-04-12 11:31:10
 * @LastEditors: June 1601745371@qq.com
 * @LastEditTime: 2024-04-18 17:20:58
 * @FilePath: \sd-designer\src\views\Editor\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="h-full" v-drop-image="{ url: 'UploadUrl', highlightStyle: { backgroundColor: 'lightblue' } }">
    <div :class="[runMode == 1 ? 'layout-content-design': 'layout-content-show', 'flex']">
      <CanvasLeft v-show="runMode == 1"/>
      <div :class="runMode == 1 ? 'layout-content-center-design': 'layout-content-center-show'">
        <CanvasHeader v-show="runMode == 1"
                      class="center-header relative flex justify-between py-[10px] text-[14px] select-none h-[39px]"/>
        <CanvasCenter ref="center" class="center-body"/>
        <!-- <CanvasFooter class="center-footer h-[40px] relative leading-1.5 flex justify-between" /> -->
        <CanvasAffix v-show="runMode == 1" class="center-affix"/>
        <!--        <CanvasICP />-->
      </div>
      <CanvasRight v-show="runMode == 1" class="layout-content-right h-full w-[260px] bg-[#fff] flex flex-col"/>
      <FrontEditorPool ref="frontEditor" v-if="loadFrontEditorPool" class="layout-content-right h-full w-[260px] bg-[#fff] flex flex-col"/>
      <CanvasDom v-show="runMode == 1" class="absolute -z-[200] -left-[300px]"/>
    </div>
    <!--    <CanvasTour v-show="runMode == 1"/>-->
  </div>
</template>

<script lang="ts" setup>
import CanvasLeft from "./CanvasLeft/index.vue";
import CanvasHeader from "./CanvasHeader/index.vue";
import CanvasCenter from "./CanvasCenter/index.vue";
import CanvasRight from "./CanvasRight/index.vue";
import CanvasFooter from "./CanvasFooter/index.vue";
import CanvasICP from "./CanvasICP/index.vue";
import CanvasAffix from "./CanvasAffix/index.vue";
import CanvasDom from "./CanvasDom/index.vue";
import CanvasTour from "./CanvasTour/index.vue";
import FrontEditorPool from "@/views/Editor/CanvasLeft/Menu/components/FrontEditorPool.vue";

import {computed, onMounted} from "vue";
import router from "@/router";
import {getCurrentUserTokenInfo} from "@/api/sys";
import {setToken} from "@/utils/js-cookie";
import {ElMessage} from "element-plus";
import {useMainStore, useUserStore} from "@/store";
import useCanvasExport from "@/hooks/useCanvasExport";
import {newDesignOrder} from "@/api/template";
import {storeToRefs} from "pinia";

const mainStore = useMainStore();
const userStore = useUserStore();
const {uuid} = storeToRefs(userStore);
const runMode = ref(0);
const {getSVGDataEx, getSVGData} = useCanvasExport()

const loadFrontEditorPool = ref(false)

const center = ref()
const frontEditor = ref()

const handleBeforeUnload = (event) => {
  // 不执行任何阻止关闭的操作
  // 不调用 event.preventDefault() 或不设置 returnValue
};

onMounted(() => {
  const query = router.currentRoute.value.query
  if (query.runMode) {
    runMode.value = query.runMode

    mainStore.setRunMode(query.runMode)
  }

  if (runMode.value == 1) {
    if (!query.virtualCode) {
      ElMessage.error('当前用户未登录,设计无法保存')
      return
    }
    const param = {
      virtualCode: query.virtualCode
    }
    getCurrentUserTokenInfo(param).then((response) => {
      if (response.httpCode == 200) {
        console.log(response.data)
        setToken('token', response.data.itemValue)
        setToken('supplierCode', response.data.supplierCode)
        setToken('dataSourceId', response.data.dataSourceId)
      }
    });
  } else if (runMode.value == 0) {
    if (!query.sessionId) {
      ElMessage.error('未传入用户标识,当前设计无法保存')
      return
    }
    userStore.setUUID(query.sessionId)

    // 使用iframe方案,本网页是内嵌页面
    // 监听来自父页面的消息
    // 20250317 全部iframe消息放在CanvasCenter中处理
    /*
    window.addEventListener("message", function (event) {
      // 确保消息来自信任的来源
      // if (event.origin !== "https://sd2000.com") {
      //   return;
      // }

      // 处理接收到的消息
      console.log("Received message:", event.data);

      //消息格式
      // {
      //   msgType: 'submitOrder'
      // }
      const message = JSON.parse(event.data);

      // if (message.msgType == "submitOrder") {
      //   //提交当前设计
      //   // const svgData: string[] = []
      //   // svgData.push(btoa(unescape(encodeURIComponent(getSVGData()))))
      //
      //   // exportSVG()
      //
      //   const svgHtml = getSVGData()
      //   console.log(svgHtml)
      //   newDesignOrder(svgHtml, uuid.value).then((response) => {
      //     if (response.httpCode == 200) {
      //       console.log(response.data)
      //       // 下载文件or直接后台拷贝至固定路径
      //     }
      //   });
      //
      // }
    });

     */
    //延迟加载
    setTimeout(() => {
      checkLoaded()
    }, 200)
  }
  mainStore.getFonts();

  window.addEventListener('beforeunload', handleBeforeUnload);
})

onUnmounted(() => {
  window.removeEventListener('beforeunload', handleBeforeUnload);
})

const checkLoaded = () => {
  if (center.value) {
    loadFrontEditorPool.value = true;
  }

  if (center.value && frontEditor.value) {
    //给父页面发送onLoaded消息,表示已经加载完毕了
    const closeMsg = {
      msgType: 'onLoaded'
    }
    window.parent.postMessage(JSON.stringify(closeMsg), '*');
  } else
    setTimeout(checkLoaded, 200)
}
</script>

<style lang="scss" scoped>
.layout-content-design {
  height: calc(100% - 40px);
}

.layout-content-show {
  height: calc(100%);
}

.layout-content-center-design {
  width: calc(100% - 50px/*- 160px*/ - 260px);

  .center-header {
    // border-left: 1px solid $borderColor;
  }

  .center-body {
    height: 100%;
    // margin: 100px;
  }

  .center-footer {
    border-top: 1px solid $borderColor;
    background-color: $lightGray;
  }
}

.layout-content-center-show {
  width: calc(100% - 260px);

  .center-header {
    // border-left: 1px solid $borderColor;
  }

  .center-body {
    height: 100%;
    // margin: 100px;
  }

  .center-footer {
    border-top: 1px solid $borderColor;
    background-color: $lightGray;
  }
}

.layout-content-right {
  // border-left: solid 1px $borderColor;
}
</style>