[Feat 0000] CAD预览器的KK viewer弃用，改为iframe模式

src/views/vent/performance/comment/CADModal.vue

@@ -11,59 +11,40 @@
     destroyOnClose
   >
     <!-- <button @click="mxcadmode = !mxcadmode">Switch Previewer</button> -->
-    <CADViewer v-if="mxcadmode" class="w-100%" :height="650" />
-    <Iframe v-else class="w-100% h-100%" :frame-src="iframerc" />
-    <!-- <iframe id="ext_cad_viewer" :src="iframerc"></iframe> -->
+    <CADViewer v-if="mxcadmode" :id="fileid" :filename="filename" class="w-100%" :height="800" />
+    <iframe v-else :src="iframesrc" class="w-100%" :height="800" ref="frameRef"></iframe>
   </BasicModal>
 </template>
 <script lang="ts" setup>
   import { ref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { onMounted } from 'vue';
-  import { CADViewer, useCADViewer } from '/@/components/CADViewer';
+  import CADViewer from '/@/views/vent/performance/fileDetail/commen/CADViewer.vue';
   import { useGlobSetting } from '/@/hooks/setting';
-  import Iframe from '/@/views/sys/iframe/index.vue';
-  const globSetting = useGlobSetting();
-  const baseApiUrl = globSetting.domainUrl;
-
-  let props = defineProps({
-    fileType: {
-      type: String,
-      default: '',
-    },
-    editID: {
-      type: String,
-      default: '',
-    },
-  });
+  import { AUTO_LOGIN_URL_QUERY } from '/@/router/constant';
 
   const { sysOrgCode } = useGlobSetting();
-  // 不是布尔台的使用 mxcad 模式，是布尔台的使用 kkviewer 模式
+  // 不是布尔台的使用 mxcad 模式，是布尔台的使用 iframe 模式以避免“法律风险”
   const mxcadmode = ref(sysOrgCode !== 'sdmtjtbetmk');
 
   // CAD预览器的 DEMO 01 相关代码
-  const iframerc = ref('');
+  const iframesrc = ref('');
 
-  // CAD 预览器的 DEMO 02 相关代码
-  const { processFile, postMessage } = useCADViewer();
+  // CAD预览器 DEMO 02
+  const fileid = ref('');
+  const filename = ref('');
 
   //表单赋值
-  const [registerModal, { setModalProps }] = useModalInner(async ({ record, getBlob }) => {
+  const [registerModal, { setModalProps }] = useModalInner(async ({ record }) => {
     //重置表单
     setModalProps({ confirmLoading: false });
 
     if (mxcadmode.value) {
-      getBlob().then((res: Blob) => {
-        // CAD 预览器的 DEMO 02
-        processFile(new File([res], record.fileName)).then((path) => {
-          postMessage('MKY_Open_Mxweb', path);
-        });
-      });
+      fileid.value = record.id;
+      filename.value = record.fileName;
     } else {
-      // CAD 预览器的 DEMO 01 @link https://kkfileview.keking.cn/zh-cn/docs/usage.html
-      const baseUrl = import.meta.env.PROD ? baseApiUrl : import.meta.env.VITE_GLOB_DOMAIN_URL;
-      const url = `${baseUrl}/ventanaly-sharefile/fileServer/downloadById?id=${record.id}&fullfilename=preview${record.fileSuffix}`;
-      iframerc.value = 'http://182.92.126.35:8012/onlinePreview?url=' + encodeURIComponent(window.btoa(url));
+      const origin = import.meta.env.PROD ? 'http://182.92.126.35:8092' : window.location.origin;
+      iframesrc.value = `${origin}/fileManager/cad-viewer?${AUTO_LOGIN_URL_QUERY.key}=${AUTO_LOGIN_URL_QUERY.val}&id=${record.id}&filename=${record.fileName}`;
     }
   });
 

src/views/vent/performance/comment/KKViewerModal.vue

@@ -1,85 +0,0 @@
-<template>
-  <BasicModal
-    v-bind="$attrs"
-    @register="registerModal"
-    title="文档管理"
-    width="900px"
-    :defaultFullscreen="true"
-    :showCancelBtn="false"
-    :showOkBtn="false"
-    :footer="null"
-    destroyOnClose
-  >
-    <iframe id="kk_file_viewer" class="w-100% h-100%" :src="src"></iframe>
-  </BasicModal>
-</template>
-<script lang="ts" setup>
-  import { unref, reactive, computed, ref } from 'vue';
-  import { BasicModal, useModalInner } from '/@/components/Modal';
-  import { onMounted } from 'vue';
-  import { CADViewer, useCADViewer } from '/@/components/CADViewer';
-  import { useUserStore } from '/@/store/modules/user';
-  import { defHttp } from '/@/utils/http/axios';
-
-  let props = defineProps({
-    fileType: {
-      type: String,
-      default: '',
-    },
-    editID: {
-      type: String,
-      default: '',
-    },
-  });
-
-  const src = ref('');
-
-  //表单赋值
-  const [registerModal, { setModalProps }] = useModalInner(async ({ record, getBlob }) => {
-    //重置表单
-    setModalProps({ confirmLoading: false });
-    console.log('debug', record);
-    const baseUrl = import.meta.env.PROD ? window.location.origin : import.meta.env.VITE_GLOB_DOMAIN_URL;
-    const url = `${baseUrl}/ventanaly-sharefile/fileServer/downloadById?id=${record.id}&fullfilename=test.dwg`;
-    // const url = URL.createObjectURL(new File([res], 'test.dwg')) + '&fullfilename=test.dwg';
-    // const url = URL.createObjectURL(res) + '&fullfilename=test.dwg';
-    console.log('debug getBlob: url is ', url);
-    window.open('http://182.92.126.35:8012/onlinePreview?url=' + encodeURIComponent(window.btoa(url)));
-    return;
-    getBlob().then((res: Blob) => {
-      console.log('debug getBlob: blob is ', res);
-      // CAD 预览器的 DEMO 01 @link https://kkfileview.keking.cn/zh-cn/docs/usage.html
-      // const url = 'http://localhost:3100/modelreq/ventanaly-sharefile/fileServer/download&fullfilename=test.dwg';
-      const baseUrl = import.meta.env.PROD ? window.location.origin : import.meta.env.VITE_GLOB_DOMAIN_URL;
-      defHttp.get({
-        url: `${baseUrl}/ventanaly-sharefile/fileServer/downloadById?id=${record.id}`,
-      });
-      const url = `${baseUrl}/ventanaly-sharefile/fileServer/downloadById?id=${record.id}&fullfilename=test.dwg`;
-      // const url = URL.createObjectURL(new File([res], 'test.dwg')) + '&fullfilename=test.dwg';
-      // const url = URL.createObjectURL(res) + '&fullfilename=test.dwg';
-      console.log('debug getBlob: url is ', url);
-      window.open('http://182.92.126.35:8012/onlinePreview?url=' + encodeURIComponent(window.btoa(url)));
-      // baseFileUrl.value = ;
-
-      // CAD 预览器的 DEMO 02
-      // processFile(new File([res], 'test.dwg')).then((path) => {
-      //   console.log('debug processFile', path);
-      //   postMessage('MKY_Open_Mxweb', path);
-      // });
-    });
-    // Object.assign(record, data.record);
-  });
-
-  onMounted(() => {
-    console.log('debug mounted');
-  });
-</script>
-
-<style scoped lang="less">
-  ::v-deep .suffix {
-    height: 32px;
-    line-height: 32px;
-    margin-left: 5px;
-    color: #fff;
-  }
-</style>

src/views/vent/performance/comment/NormalTable.vue

@@ -155,8 +155,6 @@
     if (['.dwg', '.mxcad'].includes(data.fileSuffix)) {
       openCADModal(true, {
         record,
-        // Bad Design 但是为了效率先这样写吧
-        getBlob: () => props.downLoad({ id: record.id }),
       });
     } else {
       openModal(true, {

src/views/vent/performance/fileDetail/commen/CADViewer.vue

@@ -0,0 +1,55 @@
+<template>
+  <!-- 更适用于文件共享中心的CAD viewer组件，支持两种使用方法，详见下文 -->
+  <CADViewer class="w-100% h-100%" :height="height" />
+</template>
+<script lang="ts" setup>
+  import { onMounted, watch } from 'vue';
+  import { CADViewer, useCADViewer } from '/@/components/CADViewer';
+  import { downLoad } from '../fileDetail.api';
+  import { useRoute } from 'vue-router';
+
+  const props = defineProps<{
+    // 文件共享中心中该文件的ID
+    id: string;
+    // 文件名
+    filename: string;
+    height: number;
+  }>();
+
+  const { processFile, postMessage } = useCADViewer();
+
+  function openFile(id: string, filename: string) {
+    downLoad({ id }).then((res: Blob) => {
+      processFile(new File([res], filename)).then((path) => {
+        postMessage('MKY_Open_Mxweb', path);
+      });
+    });
+  }
+
+  // 通过 props 指定文件 ID 的形式使用该组件
+  watch(
+    () => props.id,
+    (v) => {
+      if (!v) return;
+      console.log('debug watch');
+      openFile(v, props.filename);
+    }
+  );
+
+  // 通过 url query 指定文件 ID 的形式使用该组件
+  onMounted(() => {
+    const route = useRoute();
+    if (route.query.id && route.query.filename) {
+      openFile(route.query.id as string, route.query.filename as string);
+    }
+  });
+</script>
+
+<style scoped lang="less">
+  ::v-deep .suffix {
+    height: 32px;
+    line-height: 32px;
+    margin-left: 5px;
+    color: #fff;
+  }
+</style>