CADModal.vue 3.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677
  1. <template>
  2. <BasicModal
  3. v-bind="$attrs"
  4. @register="registerModal"
  5. title="文档管理"
  6. width="900px"
  7. :defaultFullscreen="true"
  8. :showCancelBtn="false"
  9. :showOkBtn="false"
  10. :footer="null"
  11. destroyOnClose
  12. >
  13. <!-- <button @click="mxcadmode = !mxcadmode">Switch Previewer</button> -->
  14. <div v-if="mxcadmode">
  15. <CADViewer v-if="fileid" :id="fileid" :filename="filename" class="w-100%" :height="800" />
  16. </div>
  17. <iframe v-else :src="iframesrc" class="w-100%" :height="800" ref="frameRef"></iframe>
  18. </BasicModal>
  19. </template>
  20. <script lang="ts" setup>
  21. // 使用须知:
  22. // 本组件是内含CADViewer的模态框组件,CADViewer提供两种实现方式分别是 内置 及 外链。
  23. // 需要特别说明的是外链方式,该方式的出现源于对版权纠纷的忌惮。
  24. // 实现原理是通过 iframe 嵌入一个支持内置实现方式的项目并传递数据然后使用。
  25. // 1、新建菜单
  26. // 路径要求为`/fileManager/cad-viewer`,组件要求为`vent/performance/fileDetail/commen/CADViewer`。
  27. // 上面用到的组件包含了内置方式的具体实现
  28. // 2、新建角色及用户
  29. // 该方式需要一个自动登录角色及用户,该用户的账号密码可在 /store/modules/user 查阅。
  30. // 同时,自动登录角色需要对上述菜单授权,同时,若该菜单存在父级,请同时授权其直系父级菜单
  31. import { ref } from 'vue';
  32. import { BasicModal, useModalInner } from '/@/components/Modal';
  33. import { onMounted } from 'vue';
  34. import CADViewer from '/@/views/vent/performance/fileDetail/commen/CADViewer.vue';
  35. import { useGlobSetting } from '/@/hooks/setting';
  36. import { AUTO_LOGIN_URL_QUERY, SKIP_SSO_URL_QUERY } from '/@/router/constant';
  37. const { sysOrgCode } = useGlobSetting();
  38. // 不是布尔台的使用 mxcad 模式,是布尔台的使用 iframe 模式以避免“法律风险”
  39. const mxcadmode = ref(sysOrgCode !== 'sdmtjtbetmk');
  40. // CAD预览器的 DEMO 01 相关代码
  41. const iframesrc = ref('');
  42. // CAD预览器 DEMO 02
  43. const fileid = ref('');
  44. const filename = ref('');
  45. //表单赋值
  46. const [registerModal, { setModalProps }] = useModalInner(async ({ record }) => {
  47. //重置表单
  48. setModalProps({ confirmLoading: false });
  49. if (mxcadmode.value) {
  50. fileid.value = record.id;
  51. filename.value = record.fileName;
  52. } else {
  53. // 当以 iframe 模式运行时,origin 在生产模式下需要指向本项目公司端所部署的地址
  54. const origin = import.meta.env.PROD ? 'http://10.248.235.101:8092' : window.location.origin;
  55. // const origin = import.meta.env.DEV ? 'http://182.92.126.35:8092' : window.location.origin;
  56. 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}`;
  57. }
  58. });
  59. onMounted(() => {});
  60. </script>
  61. <style scoped lang="less">
  62. ::v-deep .suffix {
  63. height: 32px;
  64. line-height: 32px;
  65. margin-left: 5px;
  66. color: #fff;
  67. }
  68. </style>