mky-vent-base/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>