lzga-ui/src/views1/File/Individual/Pre/PreView.vue

<template>
<div class="containe">
  <div v-if='show' class='qualityManual-container-office'>
    <vab-only-office :option='option' />
  </div>
  <el-button type="primary" plain icon="el-icon-arrow-left" size="mini" @click="handleClose" class="fh">返回1</el-button>
</div>
</template>

<script>
  import vabOnlyOffice from '@/views/doc/oo/onlyoffice.vue'

  export default {
    name: 'OoEdit',
    components: {
      vabOnlyOffice
    },
    data() {
      return {
        //参考vabOnlyOffice组件参数配置
        option: {
          key: '',
          url: '', //在线文档地址
          isEdit: '', //是否允许编辑
          fileType: '', //文件扩展名
          title: '', //文件标题
          user: {
            id: null, //用户ID
            name: '' //用户姓名
          },
          editUrl: '' //回调地址
        },
        show: true //是否显示
      }
    },
    created() {
      this.getFile();
    },
    methods: {
        // 返回按钮
        handleClose() {
        const obj = {
          path: "/home/file/individual"
        };
        this.$tab.closeOpenPage(obj);
      },

      getFile() {
        //获取当前登录用户名：this.$store.state.user.name
        //获取当前登录用户ID：this.$store.state.user.uid
        //获取当前登录用户昵称：this.$store.state.user.uname
        let row = this.$route.query;
        let isEdit = row.isEdit == 'true';
        this.show = true;
        // getAction('/file/selectById', { id: this.id }).then(res => {
        this.option.isEdit = isEdit;
        this.option.url = row.docPath;
        //'http://192.168.1.26:9300/statics/2023/04/03/产品研发会议纪要20230314_20230403170635A001.doc';
        this.option.title = row.docName; //'测试word';
        this.option.fileType = row.docType;

        this.option.user = {
          id: this.$store.state.user.uid,
          name: this.$store.state.user.uname
        };
        this.option.editUrl = 'http://192.168.1.26:8080/doc/only-office/callback?id=' + row.docId +
          "&year=" + row.createYear + "&name=" + this.$store.state.user.name;
      },
      close() {
        this.show = false
      }
    }
  }
</script>

<style>
  html,
  body {
    height: '900px';
  }

  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    height: '900px';

  }

  .qualityManual-container {
    padding: 0 !important;
    height: '900px';
  }

  .qualityManual-container-office {
    width: 100%;
    height: '900px';
  }
  .fh{
    position: absolute;
    right: 1%;
    top: 8%;
    background: #2E8AECFF !important;
    color: #fff !important;
    border: none;
  }
</style>