mky-vent-base/src/views/vent/performance/comment/CADModal.vue

<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    title="文档管理"
    width="900px"
    :defaultFullscreen="true"
    :showCancelBtn="false"
    :showOkBtn="false"
    :footer="null"
    destroyOnClose
  >
    <!-- <button @click="mxcadmode = !mxcadmode">Switch Previewer</button> -->
    <div v-if="mxcadmode">
      <CADViewer v-if="fileid" :id="fileid" :filename="filename" class="w-100%" :height="800" />
    </div>
    <iframe v-else :src="iframesrc" class="w-100%" :height="800" ref="frameRef"></iframe>
  </BasicModal>
</template>
<script lang="ts" setup>
  // 使用须知：

  // 本组件是内含CADViewer的模态框组件，CADViewer提供两种实现方式分别是 内置 及 外链。
  // 需要特别说明的是外链方式，该方式的出现源于对版权纠纷的忌惮。
  // 实现原理是通过 iframe 嵌入一个支持内置实现方式的项目并传递数据然后使用。

  // 1、新建菜单
  // 路径要求为`/fileManager/cad-viewer`，组件要求为`vent/performance/fileDetail/commen/CADViewer`。
  // 上面用到的组件包含了内置方式的具体实现
  // 2、新建角色及用户
  // 该方式需要一个自动登录角色及用户，该用户的账号密码可在 /store/modules/user 查阅。
  // 同时，自动登录角色需要对上述菜单授权，同时，若该菜单存在父级，请同时授权其直系父级菜单
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { onMounted } from 'vue';
  import CADViewer from '/@/views/vent/performance/fileDetail/commen/CADViewer.vue';
  import { useGlobSetting } from '/@/hooks/setting';
  import { AUTO_LOGIN_URL_QUERY, SKIP_SSO_URL_QUERY } from '/@/router/constant';

  const { sysOrgCode } = useGlobSetting();
  // 不是布尔台的使用 mxcad 模式，是布尔台的使用 iframe 模式以避免“法律风险”
  const mxcadmode = ref(sysOrgCode !== 'sdmtjtbetmk');

  // CAD预览器的 DEMO 01 相关代码
  const iframesrc = ref('');

  // CAD预览器 DEMO 02
  const fileid = ref('');
  const filename = ref('');

  //表单赋值
  const [registerModal, { setModalProps }] = useModalInner(async ({ record }) => {
    //重置表单
    setModalProps({ confirmLoading: false });

    if (mxcadmode.value) {
      fileid.value = record.id;
      filename.value = record.fileName;
    } else {
      // 当以 iframe 模式运行时，origin 在生产模式下需要指向本项目公司端所部署的地址
      const origin = import.meta.env.PROD ? 'http://10.248.235.101:8092' : window.location.origin;
      // const origin = import.meta.env.DEV ? 'http://182.92.126.35:8092' : window.location.origin;
      iframesrc.value = `${origin}/fileManager/cad-viewer?${SKIP_SSO_URL_QUERY.key}=${SKIP_SSO_URL_QUERY.val}&${AUTO_LOGIN_URL_QUERY.key}=${AUTO_LOGIN_URL_QUERY.val}&id=${record.id}&filename=${record.fileName}`;
    }
  });

  onMounted(() => {});
</script>

<style scoped lang="less">
  ::v-deep .suffix {
    height: 32px;
    line-height: 32px;
    margin-left: 5px;
    color: #fff;
  }
</style>