gasInjection-project/src/views/vent/monitorManager/comment/components/reportInfo.vue

<template>
  <BasicModal
    @register="registerModal"
    :defaultFullscreen="true"
    title="报表导出"
    width="1000px"
    v-bind="$attrs"
    :footer="null"
    :showCancelBtn="false"
    :showOkBtn="false"
    destroyOnClose
    :mask-closable="false"
  >
    <div id="fileEdit"></div>
  </BasicModal>
</template>

<script lang="ts" setup>
  import { computed, unref, inject, reactive, ref, watch, defineProps } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useUserStore } from '/@/store/modules/user';

  let props = defineProps({
    editID: {
      type: String,
      default: () => {
        return '';
      },
    },
    fileType: {
      type: String,
      default: () => {
        return '';
      },
    },
  });

  const remoteUrl = import.meta.env.DEV ? 'http://182.92.126.35' : 'http://' + window.location.hostname;
  const userStore = useUserStore(); //获取用户信息
  let userId = unref(userStore.getUserInfo).id;
  let userName = unref(userStore.getUserInfo).username;
  // const emit = defineEmits(['register']);

  let [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    //重置表单
    setModalProps({ confirmLoading: false });
    // Object.assign(deviceData, data.record);
  });

  watch(
    () => props.editID,
    (newV, oldV) => {
      console.log(newV, 'newV----------');
      new DocsAPI.DocEditor(
        'fileEdit', // 元素id
        {
          type: 'desktop',
          width: '100%',
          height: '860px',
          document: {
            title: '文档管理',
            url: remoteUrl + ':9999/ventanaly-device/safety/reportInfo/onlyOffice/read?id=' + props.editID + '&type=' + '', //id表示文件id，后端接口用这个id来加载文件
            fileType: props.fileType == 'doc' ? 'docx' : props.fileType == 'xls' ? 'xlsx' : props.fileType == 'ppt' ? 'pptx' : props.fileType, //当文件类型为doc、xls、ppt时，对应用docx、xlsx、pptx否则会保存异常。
            key: '',
            lang: 'zh-CN',
            permissions: {
              download: true, //是否可下载
              edit: true,
              fillForms: true,
              print: true, //是否可打印
            },
          },
          editorConfig: {
            lang: 'zh-CN',
            mode: 'view', //view：只读且可复制内容，edit：可编辑
            callbackUrl: remoteUrl + ':9999/ventanaly-device/safety/reportInfo/onlyOffice/save?id=' + props.editID + '&type=' + '', //id表示文件id，后端接口用这个id来加载文件
            coEditing: {
              mode: 'fast',
              change: true,
            },
            customization: {
              toolbarNoTabs: true,
              autosave: false, //是否自动保存
              forcesave: true, //定义保存按钮是否显示
              hideRightMenu: true,
            },
            //用户信息
            user: {
              id: userId, //用户ID
              name: userName, //用户名称
            },
          },
        }
      );
    }
  );
</script>

<style lang="less" scoped></style>