质量管理/安全知识库

src/views/safety/knowledgeDocument/component/documentsDeails.vue

@@ -0,0 +1,194 @@
+<template>
+  <div class="document_detail" id="document_detail">
+    <div class="move_pop" id="detial_pop">
+      <!-- <span>{{ title }}</span> -->
+      <div class="box">
+        <img v-if="type == 2" src="../icon/suo.png" @click="onFull(1)" />
+        <img v-else src="../icon/full.png" @click="onFull(2)" />
+        <span class="close" @click="onClose">✖</span>
+      </div>
+    </div>
+    <div class="box_app" id="box_app"></div>
+  </div>
+</template>
+<script lang="ts">
+import { setMove } from '@/utils/moveDiv';
+export default defineComponent({
+  name: 'index',
+  setup(props, { emit }) {
+    const { proxy } = <any>getCurrentInstance();
+    const state = reactive({
+      title: '',
+      type: 2
+    });
+    onMounted(() => {
+      setMove('detial_pop', 'document_detail');
+    });
+    // 打开弹窗
+    const openDialog = (obj) => {
+      state.title = obj.fileName;
+      init(obj);
+    };
+    const onError = function (event) {
+      //举例，强制保存后，判断文档内容是否保存成功
+      if (event.data) {
+        if (event.data.errorCode == 'forcesave') {
+          var desc = event.data.errorDescription;
+          desc = JSON.parse(desc);
+          if (desc.error == 0) {
+            //保存成功
+          } else {
+            //保存失败或异常
+          }
+        } else if (event.data.errorCode == 'setallcellvalue') {
+          var desc = event.data.errorDescription;
+          desc = JSON.parse(desc);
+          if (desc.error == 0) {
+            //填充成功
+          } else if (desc.error == -1) {
+            //当前文档正处于协同编辑中
+          } else {
+            //填充异常
+          }
+        } else if (event.data.errorCode == 'clearsheet') {
+          var desc = event.data.errorDescription;
+          desc = JSON.parse(desc);
+          if (desc.error == 0) {
+            //清除成功
+          } else if (desc.error == -1) {
+            //当前文档正处于协同编辑中
+          } else {
+            //清除异常
+          }
+        }
+      }
+    };
+    const onDocumentReady = function () {
+      // console.log('文档加载完成');
+    };
+    const init = (obj) => {
+      let documentKey = obj.id.toString() + new Date().getTime();
+      let baseURL = import.meta.env.VITE_APP_BASE_API + '/';
+      console.log(baseURL);
+
+      let url = baseURL + obj.filePath.replaceAll('+', ' ');
+      console.log('🚀 ~ init ~ url:', obj.fileUrl);
+      let type = obj.fileSuffix;
+      if (obj.fileSuffix.includes('.')) {
+        type = obj.fileSuffix.substring(1);
+      }
+      let documentType = 'word'; // docx doc
+      if (type == 'xlsx' || type == 'xls') {
+        documentType = 'cell'; //电子表格
+      } else if (type == 'ppt' || type == 'pptx') {
+        documentType = 'slide'; //演示文档文件
+      }
+      console.log(documentType, obj.fileSuffix);
+
+      new CXO_API.CXEditor('box_app', {
+        document: {
+          fileType: type,
+          key: documentKey,
+          title: obj.fileName,
+          url: obj.fileUrl
+        },
+        documentType,
+        editorConfig: {
+          mode: 'view',
+          callbackUrl: ''
+        },
+        height: '100%',
+        events: {
+          onDocumentReady: onDocumentReady,
+          onError: onError
+        },
+        zoom: -1
+      });
+    };
+    const onClose = () => {
+      emit('onClose', false);
+    };
+    const onFull = (type) => {
+      // 全屏
+      let document_detail = document.getElementById('document_detail');
+      state.type = type;
+      if (type == 2) {
+        document_detail.style.width = '100%';
+        document_detail.style.height = '100%';
+      } else {
+        document_detail.style.width = '1200px';
+        document_detail.style.height = '80vh';
+      }
+    };
+    return {
+      proxy,
+      openDialog,
+      onClose,
+      onFull,
+      ...toRefs(state)
+    };
+  }
+});
+</script>
+<style lang="scss">
+.document_detail {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 999999;
+  width: 100%;
+  height: 100%;
+  border: 1px solid #9f9f9f;
+  .box_app {
+    // width: 1300px !important;
+    // height: 80vh !important;
+    background-color: #f1f1f1;
+  }
+  .move_pop {
+    width: 100%;
+    // position: absolute;
+    // top: 0;
+    // right: 0%;
+    height: 24px;
+    // background: linear-gradient(#2a5095, #213f7b, #111e48);
+    background-color: #f4f5f6;
+    display: grid;
+    place-items: center;
+    > span {
+      color: #000000;
+      font-weight: bold;
+      font-size: 20px;
+      letter-spacing: 2px;
+    }
+    .box {
+      display: flex;
+      width: 60px;
+      position: absolute;
+      top: 0;
+      right: 10px;
+      // height: 100%;
+      align-items: center;
+      img {
+        width: 22px;
+        margin-top: 6px;
+        cursor: pointer;
+      }
+      .close {
+        position: absolute;
+        right: 2px;
+        /* top: -8px; */
+        color: #8d8d8d;
+        width: 24px;
+        height: 24px;
+        font-size: 20px;
+        //border: 2px solid #0ff;
+        border-radius: 50%;
+        display: grid;
+        place-items: center;
+        cursor: pointer;
+      }
+    }
+  }
+}
+</style>