清表模板在线编辑修改1、

public/index.html

@@ -16,6 +16,7 @@
   <link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/avue/iconfont.css">
   <link rel="stylesheet" href="<%= BASE_URL %>cdn/iconfont/saber/iconfont.css">
   <link rel="stylesheet" href="<%= BASE_URL %>cdn/avue/2.9.5/index.css">
+  <script type='text/javascript' src='http://47.98.223.222:8090/web-apps/apps/api/documents/api.js'></script>
   <script src="<%= BASE_URL %>cdn/xlsx/FileSaver.min.js"></script>
   <script src="<%= BASE_URL %>cdn/xlsx/xlsx.full.min.js"></script>
   <link rel="icon" href="<%= BASE_URL %>favicon.png">

src/components/online-office/index.vue

@@ -0,0 +1,119 @@
+<!--onlyoffice 编辑器-->
+<template>
+  <div id='vabOnlyOffice'></div>
+</template>
+
+<script>
+  export default {
+    name: 'VabOnlyOffice',
+    props: {
+      option: {
+        type: Object,
+        default: () => {
+          return {}
+        },
+      },
+    },
+    data() {
+      return {
+        doctype: '',
+        docEditor: null,
+      }
+    },
+    beforeDestroy() {
+      if (this.docEditor !== null) {
+        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;
+        }
+        this.doctype = this.getFileType(option.fileType)
+        let config = {
+          document: {
+            //后缀
+            fileType: option.fileType,
+            key: option.key ||'',
+            title: option.title,
+            permissions: {
+              edit: true,//是否可以编辑: 只能查看，传false
+              print: true,
+              download: true,
+              "fillForms": true,//是否可以填写表格，如果将mode参数设置为edit，则填写表单仅对文档编辑器可用。 默认值与edit或review参数的值一致。
+              "review": true //跟踪变化
+            },
+            url: option.url,
+          },
+          documentType: this.doctype,
+          editorConfig: {
+            callbackUrl: option.editUrl,//"编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置
+            lang: option.lang,//语言设置
+            //定制
+            customization: {
+              autosave: false,//是否自动保存
+              chat: false,
+              comments: false,
+              help: false,
+              hideRightMenu:true,
+              // "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
+              //是否显示插件
+              plugins: false,
+            },
+            user:{
+            id:option.user.id,
+            name:option.user.name
+          },
+          mode:option.model?option.model:'edit',
+          },
+          width: '100%',
+          height: '100%',
+          token:option.token||''
+        }
+
+        // eslint-disable-next-line no-undef,no-unused-vars
+        this.docEditor = new DocsAPI.DocEditor('vabOnlyOffice', config)
+
+      },
+      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>

src/views/exctab/excelmodel/excelmodel.vue

@@ -246,10 +246,13 @@
             v-if="from.fileUrl"
             style="flex:1;"
           >
-            <iframe
+            <!-- <iframe
               :src="excelSrc"
               style="width:100%;height:100%;"
-            ></iframe>
+            ></iframe> -->
+            <div v-if='excelshow' class='qualityManual-container-office' style="width:100%;height:100%;">
+              <vab-only-office :option='exceloption' />
+            </div>
           </div>
         </div>
       </div>
@@ -406,15 +409,29 @@
 </template>
 
 <script>
+import {mapGetters} from "vuex";
 import { detailExcel, excelType, tabLazytree, getWbsTypeList, wbstree, selectByNodeTable, Excelmodify, uploadExcel, deleteExcelshu, deleteExcel ,tabLazytreeAll,
           uploadcoverfileExcel,downExcelFile,exctabSort} from '@/api/exctab/excelmodel';
 import ManualSorting from '@/components/WbsTree/ManualSorting'
+import VabOnlyOffice from '@/components/online-office/index'
 export default {
   components: {
-    ManualSorting,
+    ManualSorting,VabOnlyOffice
   },
   data () {
     return {
+        //参考vabOnlyOffice组件参数配置
+      exceloption: {
+          url: '',
+          isEdit: '',
+          fileType: '',
+          title: '',
+          lang: '',
+          isPrint: '',
+          user: { id:null,name:''}
+      },
+      excelshow: false,
+      
       expandedKeys:[],//默认展开的节点
       excelId:'',
       treeNode: {},
@@ -510,8 +527,23 @@ export default {
       curTreeData:{},
       defaultExpandKey:[],
     }
+  },
+    computed: {
+    ...mapGetters(["userInfo"]),
   },
   methods: {
+       getFile() {
+        this.excelshow = true
+        // getAction('/file/selectById', { id: this.id }).then(res => {
+        this.exceloption.isEdit = false
+        this.exceloption.lang = 'zh-CN'
+        this.exceloption.url = this.from.fileUrl
+        this.exceloption.title = this.from.extension
+        this.exceloption.fileType = 'xlsx'
+        this.exceloption.isPrint = false
+        this.exceloption.user= { id:12,name:this.userInfo.user_name}
+        // })
+      },
         //刷新左边树形数据
       refreshTree(){
         console.log(this.curTreeData,'this.curTreeData111111111');
@@ -624,6 +656,7 @@ export default {
         this.excelSrc = 'http://view.officeapps.live.com/op/view.aspx?src=' + encodeURIComponent(pSrc);
         // //导入模板名称
         // this.from.import={}
+        this. getFile()
       }
     },
     async getWbsTypeList () {//清表编辑 wbs 下拉框选择