CADModal.vue 2.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  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. import { ref, triggerRef } from 'vue';
  22. import { BasicModal, useModalInner } from '/@/components/Modal';
  23. import { onMounted } from 'vue';
  24. import CADViewer from '/@/views/vent/performance/fileDetail/commen/CADViewer.vue';
  25. import { useGlobSetting } from '/@/hooks/setting';
  26. import { AUTO_LOGIN_URL_QUERY } from '/@/router/constant';
  27. const { sysOrgCode } = useGlobSetting();
  28. // 不是布尔台的使用 mxcad 模式,是布尔台的使用 iframe 模式以避免“法律风险”
  29. const mxcadmode = ref(sysOrgCode !== 'sdmtjtbetmk');
  30. // CAD预览器的 DEMO 01 相关代码
  31. const iframesrc = ref('');
  32. // CAD预览器 DEMO 02
  33. const fileid = ref('');
  34. const filename = ref('');
  35. //表单赋值
  36. const [registerModal, { setModalProps }] = useModalInner(async ({ record }) => {
  37. //重置表单
  38. setModalProps({ confirmLoading: false });
  39. if (mxcadmode.value) {
  40. fileid.value = record.id;
  41. filename.value = record.fileName;
  42. } else {
  43. const origin = import.meta.env.PROD ? 'http://182.92.126.35:8092' : window.location.origin;
  44. // const origin = import.meta.env.DEV ? 'http://182.92.126.35:8092' : window.location.origin;
  45. iframesrc.value = `${origin}/fileManager/cad-viewer?${AUTO_LOGIN_URL_QUERY.key}=${AUTO_LOGIN_URL_QUERY.val}&id=${record.id}&filename=${record.fileName}`;
  46. }
  47. });
  48. onMounted(() => {});
  49. </script>
  50. <style scoped lang="less">
  51. ::v-deep .suffix {
  52. height: 32px;
  53. line-height: 32px;
  54. margin-left: 5px;
  55. color: #fff;
  56. }
  57. </style>