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

<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>