vent-template/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" 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 './CADViewer.vue';
  // import { useGlobSetting } from '/@/hooks/setting';
  // import { useAutoLogin } from '/@/hooks/vent/useAutoLogin';
  // import { MOCK_LOGIN_UESRNAME } from '/@/store/constant';

  defineProps({
    fileid: {
      type: String,
      default: '',
    },
  });
  // const { sysOrgCode } = useGlobSetting();
  // const { getUrl } = useAutoLogin();
  // 不是布尔台的使用 mxcad 模式，是布尔台的使用 iframe 模式以避免“法律风险”
  // 暂时只允许本地预览模式，是因为认证需要机器码，目前仅在神东公司端有这个认证服务，前端也只有这一个码存好了
  const mxcadmode = ref(true);
  // 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 = getUrl(`${origin}/fileManager/cad-viewer`, {
    //     // [SKIP_SSO_URL_QUERY.key]: SKIP_SSO_URL_QUERY.val,
    //     id: record.id,
    //     filename: record.fileName,
    //     workNo: MOCK_LOGIN_UESRNAME,
    //   });
    //   // iframesrc.value = `${origin}/fileManager/cad-viewer?${SKIP_SSO_URL_QUERY.key}=${SKIP_SSO_URL_QUERY.val}&${MOCK_LOGIN_URL_QUERY.key}=${MOCK_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>