xiaoshi_system/src/components/VabOnlyOffice/index.vue

<!--onlyoffice 编辑器-->
<template>
  <div style="height:100%;width:100%" v-loading="loading">
    <div id='vabOnlyOffice' v-if="show"></div>
  </div>
 
</template>

<script>
import mixins from './index.js'
  export default {
    name: 'VabOnlyOffice',
    components:{
    },
    mixins:[mixins],
    props: {
      option: {
        type: Object,
        default: () => {
          return {}
        },
      },
    },
    data() {
      return {
        doctype: '',
        docEditor: null,
        loading:false,
        show:true,
        currentVersion:{},
        historyData:[]
      }
    },
    beforeDestroy() {
      if (this.docEditor !== null) {
        if(this.option.model != 'view'){
          var params = {
            c:'forcesave',
            key:this.option.key,
          }
          this.$api.onlyOffice_forceSave(params).then(response=>{
              if(response.code == 200){
              }
          })
        }
        
        this.docEditor.destroyEditor();
        this.docEditor = null;
      }
   },
    watch: {
      // option: {
      //   handler: function(n) {
      //     this.setEditor(n)
      //     this.doctype = this.getFileType(n.fileType)
      //   },
      //   deep: true,
      // },
    },
    mounted() {
      if (this.option.url) {
        this.setEditor(this.option)
      }
    },
    methods: {
      async setEditor(option) {
        if (this.docEditor !== null) {
          this.docEditor.destroyEditor();
          this.docEditor = null;
        }
        var params = {
          guid:this.option.id,
        }
        await this.$api.getCurrentVersionData(params).then(response=>{
          if(response.code == 200){
            if(response.data && response.data.fileType){
              var obj = response.data
              this.option.fileType=obj.fileType,
              this.option.key=obj.key,
              this.option.version = obj.version
              this.option.url=this.$c.url+ (this.$c.env=='production'?'/api':'')+'/fileManager/downloadFile?fileId=' +obj.url
            }
          }
        })
        this.doctype = this.getFileType(option.fileType)
        var user={
          id:option.user.id,
          name:option.user.name
        }
        
        let callbackUrl = this.$c.url + (this.$c.env=='production'?'/api/fms':'') +`/onlyOffice/callback?guid=${option.id}`
        if(option.title){
          callbackUrl += `&fileName=${option.title}`
        }
        if(option.created){
          callbackUrl += `&created=${option.created}`
        }
        if(user.id){
          callbackUrl += `&user=${user.id}`
        }
        if(option.version){
          callbackUrl += `&previousVersion=${option.version}`
        }


        let config = {
          document: {
            //后缀
            fileType: option.fileType,
            key: option.key ||'',
            title: option.title,
            permissions: {
              edit: option.isEdit||true,//是否可以编辑: 只能查看，传false
              print: option.isPrint ||true,
              download: true,
              fillForms: true,//是否可以填写表格，如果将mode参数设置为edit，则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。
              review: true, //跟踪变化
              comment:true,//是否可以注释文档
              copy:true,
              chat: true,
            },
            url: option.url,
          },
          documentType: this.doctype,
          editorConfig: {
            // callbackUrl: 'http://192.168.2.24:8803/Test/TestQuery',//"编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置
            callbackUrl: callbackUrl,//"编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置
            lang: option.lang,//语言设置
            //定制
            customization: {
              spellcheck: false,
              comments:true,
              about:false,
              autosave: true,//是否自动保存
              forcesave:true,
              review: {
                hideReviewDisplay: false,
                showReviewChanges: false,
                reviewDisplay: "markup",
                trackChanges: true,
                hoverMode: true,
            },
              help: false,
              // "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
              //是否显示插件
              plugins: false,
              // "feedback": false
              // customer:{
              //   logo:'https://www.xsip.cn/api/fileManager/downloadFile?fileId=9ba11d7c72d24387a8cb2f484c23e0a5',
              //   address:'',
              //   info:'',
              //   logoDark:'https://www.xsip.cn/api/fileManager/downloadFile?fileId=9ba11d7c72d24387a8cb2f484c23e0a5',
              //   mail:'',
              //   name:'',
              //   www:'',
              // },
              logo: {
              //   image: "https://www.xsip.cn/api/fileManager/downloadFile?fileId=9ba11d7c72d24387a8cb2f484c23e0a5",
              //   imageDark: "https://www.xsip.cn/api/fileManager/downloadFile?fileId=9ba11d7c72d24387a8cb2f484c23e0a5",
              //   url: "",
                visible: false,
              },
            },
            user:user,
            mode:option.model?option.model:'edit',
            // "canCoAuthoring": true
          },
          events:{
            onRequestHistory:this.onRequestHistory,//获取历史记录
            onRequestHistoryData:this.onRequestHistoryData,//获取历史文件
            onRequestRestore:this.onRequestRestore,//恢复
            onRequestHistoryClose:this.onRequestHistoryClose,//关闭历史
          },
          width: '100%',
          height: '100%',
          // token:option.token||'',
          // frameEditorId: "vabOnlyOffice",
          // parentOrigin: window.location.origin,
          // type: "desktop"
        }
        if(!config.token){
          //获取token并赋值
          var data = {
            jsons:JSON.stringify(config)
          }
          this.loading = true
          await this.$api.GetJWT(data).then(response=>{
            if(response.code == 200){
              config.token = response.data
              this.option.token = response.data
              this.loading = false
            }
          }).catch(error=>{
            this.loading  = false
          })
          // config.token = this.getJWT(config)
         
        }
       
        // eslint-disable-next-line no-undef,no-unused-vars
        this.docEditor = new DocsAPI.DocEditor('vabOnlyOffice', config)
      },
      async onRequestHistory(event){
        var params = {
          guid:this.option.id
        }
        var that = this
        await this.$api.queryFileVersion(params).then(response=>{
          if(response.code == 200){
            that.currentVersion = response.data.currentVersion
            that.historyData = response.data.history
          }
        })
        
        if((this.historyData && this.historyData.length == 0) || !this.historyData || !this.currentVersion){
          that.docEditor.refreshHistory({
            currentVersion:'',
            history:[]
          })
          return
        }
        var currentVersion = this.currentVersion
        this.option.version = currentVersion
        var history = []
        for(var i = 0;i<that.historyData.length;i++){
          var item = that.historyData[i]
            history.push(
                {
                  serverVersion:item.serverVersion,
                  // changes:item.changes,
                  created:item.created,
                  user:item.user,
                  version:item.version,
                  key:item.key,
                }
              )
        }
        history.reverse()
        this.docEditor.refreshHistory(
          {
            currentVersion:currentVersion,
            history:history
          }
        )
        return
      },
      async onRequestHistoryData(event){
        const version = event.data
        var obj = this.historyData.find(item=>{
          return item.version == version
        })
        if(obj){
          var obj1 = null
          if(obj.previousVersion){
            obj1 = this.historyData.find(item=>{
              return item.version == obj.previousVersion
            })
          }
          var obj2 = {
            fileType:obj.fileType,
            key:obj.key,
            url:this.$c.url+ (this.$c.env=='production'?'/api':'')+'/fileManager/downloadFile?fileId=' +obj.url,
            version:obj.version,
            // previous:obj1?{
            //   fileType:obj1.fileType,
            //   key:obj1.key,
            //   url:this.$c.url+ (this.$c.env=='production'?'/api':'')+'/fileManager/downloadFile?fileId=' +obj1.url,
            // }:null,
            // changesUrl:obj.changesUrl?(this.$c.url+ (this.$c.env=='production'?'/api':'')+'/fileManager/downloadFile?fileId=' +obj.changesUrl):""
          }
          var params = {
            jsons:JSON.stringify(obj2)
          }
          this.loading = true
          await this.$api.GetJWT(params).then(response=>{
            if(response.code == 200){
              obj2.token = response.data
              this.option.token = response.data
              this.loading = false
            }
          }).catch(error=>{
            this.loading  = false
          })
          this.docEditor.setHistoryData(obj2)
          }
      },
      //恢复
      onRequestRestore(event){
        const version = event.data.version
        var params = {
          userId:this.option.user.id,
          userName:this.option.user.name,
          restoreVersion:version,
          previousVersion:this.option.version,
          guid:this.option.id
        }
        this.$api.restoreVersion(params).then(response=>{
          if(response.code == 200){
            this.setEditor(this.option)
          }
        })
      },
      onRequestHistoryClose(event){
        this.setEditor(this.option)
      },
      getFileType(fileType) {
        let docType = ''
        let fileTypesDoc = [
            'doc', 'docm', 'docx', 'dot', 'dotm', 'dotx', 'epub', 'fodt', 'htm', 'html', 'mht', 'odt', 'ott', 'pdf', 'rtf', 'txt', 'djvu', 'xps',
        ]
        let fileTypesCsv = [
            'csv', 'fods', 'ods', 'ots', 'xls', 'xlsm', 'xlsx', 'xlt', 'xltm', 'xltx',
        ]
        let fileTypesPPt = [
            'fodp', 'odp', 'otp', 'pot', 'potm', 'potx', 'pps', 'ppsm', 'ppsx', 'ppt', 'pptm', 'pptx',
        ]
        if (fileTypesDoc.includes(fileType)) {
            docType = 'text'
        }
        if (fileTypesCsv.includes(fileType)) {
            docType = 'spreadsheet'
        }
        if (fileTypesPPt.includes(fileType)) {
            docType = 'presentation'
        }
        return docType
      },
    },
  }
</script>
<style>
.extra #header-logo i{
  background-image: url('../../assets/logo.png') !important;
}
</style>