Skip to content

liangzhen / framework-tools-web

Go to a project
Commit 1fd26c02 by Thews
Options

20231130wangwansu

1 parent 3f76f439
Inline Side-by-side
Showing with 187 additions and 159 deletions
src/components/onlyOffice.vue 0 → 100644
<template>
<div id='vabOnlyOffice'></div>
</template>
<script>
// import { getFileType } from '@/utils/wayne'
export default {
name: 'VabOnlyOffice',
props: {
option: {
type: Object,
default: () => {
return {}
},
},
},
data() {
return {
doctype: '',
//参数说明
parameters: {
'document': {
//文件扩展名
'fileType': 'docx',
//key 默认置空则不走缓存 always update
'key': '',
//为已查看或编辑的文档定义所需的文件名，该文件名在下载文档时也将用作文件名。
'title': '',
//文件地址
'url': '',
//相关权限
'permissions': {
'copy': true,//定义内容是否可以复制到剪贴板。如果该参数设置为false，则只能在当前文档编辑器中粘贴内容。默认值为true。
'download': true,//定义文档是可以下载还是只能在线查看或编辑。如果下载权限设置为“假”的下载为...菜单选项将是缺席的文件菜单。默认值为true。
'edit': true,//定义文档是可以编辑还是只能查看。如果编辑权限设置为“true”，则文件菜单将包含编辑文档菜单选项；请注意，如果编辑权限设置为“false”，文档将在查看器中打开，即使模式参数设置为edit，您也无法将其切换到编辑器。默认值为true。
'print': true,//定义是否可以打印文档。如果打印权限设置为“false”的打印菜单选项将是缺席的文件菜单。默认值为true
},
},
//文件类型
'documentType': 'text',
'height': '100%',
'width': '100%',
'editorConfig': {
//语言：zh-CN简体中文/en英文
'lang': 'zh-CN',
//阅读状态 view/edit
'mode': 'view',
'customization': {
//是否显示插件
'plugins': false,
},
},
},
}
},
watch: {
option: {
// handler: function(n) {
// this.setEditor(n)
// this.doctype = getFileType(n.fileType)
// },
deep: true,
},
},
mounted() {
if (this.option.url) {
this.setEditor(this.option)
}
},
methods: {
async setEditor(option) {
// this.doctype = getFileType(option.fileType)
// this.doctype = ".word"
let config = {
document: {
//后缀
fileType: option.fileType,
key: '',
title: option.title,
permissions: {
edit: option.isEdit,//是否可以编辑: 只能查看，传false
print: option.isPrint,
download: false,
// "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": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
//是否显示插件
plugins: false,
//暂时无法生效
customer: {
address: '12333333333',
info: 'S11',
logo: '123',
mail: 'j123',
name: '123',
www: '123',
},
},
},
"token": "IQJIKLFoQLZUWmGpD1A7ynv30u6N3K",
width: '100%',
height: '100%',
}
// eslint-disable-next-line no-undef,no-unused-vars
new DocsAPI.DocEditor('vabOnlyOffice', config)
},
},
}
</script>
\ No newline at end of file
src/utils/request.js
import Vue from 'vue'; import jwt from 'jsonwebtoken'; // 假设你已经安装了 jsonwebtoken 包
import axios from 'axios';
const cfgSignatureSecret = 'IQJIKLFoQLZUWmGpD1A7ynv30u6N3K'; // 应该从环境变量或配置文件中获取
const cfgSignatureSecretExpiresIn = '1h'; // 令牌过期时间
import router from '../router/index.js'; const cfgSignatureSecretAlgorithmRequest = 'HS256'; // 算法
import {
Message, export const jwtService = {
MessageBox, getToken(data) {
Loading const options = {
} from 'element-ui'; algorithm: cfgSignatureSecretAlgorithmRequest,
expiresIn: cfgSignatureSecretExpiresIn,
};
let head = false; return jwt.sign(data, cfgSignatureSecret, options);
axios.defaults.timeout = 300000; },
axios.defaults.baseURL = process.env.VUE_APP_BASE_API; };
// axios.defaults.baseURL = 'http://61.141.221.175:8081'; \ No newline at end of file
//http request 拦截器
axios.interceptors.request.use(config => {
// MessageBox.alert('<div class="box"><p>这里放图标</p><p>HTML</p></div>',{
// confirmButtonText: '确定',
// center: true,
// cancelButtonClass:"Text",
// dangerouslyUseHTMLString: true
// })
if (head) {
// if(head.headers){
// config.headers['content-type'] = 'multipart/form-data'
// }else{
// config.headers['content-type'] = 'application/x-www-form-urlencoded'
// }
config.headers['content-type'] = 'multipart/form-data'
} else {
config.data = JSON.stringify(config.data);
config.headers['content-type'] = 'application/json'
}
if(config.url=='/framework/page'||config.url=='/user/page'||config.url=='/activiti/saveModel'||config.url=='/activiti/processList'||config.url=='/activiti/findModelInfoDto'){
config.headers['content-type'] = 'application/json'
}
if(config.url=='/processClassification/delete'){//||config.url=="/activiti/createModel"
config.headers['content-type'] = 'application/x-www-form-urlencoded'
}
if(config.url!='/auth/login'){
config.headers['Authorization']=sessionStorage.getItem('adminToken')||''
}
return config;
},
error => {
return Promise.reject(error);
}
);
//响应拦截器即异常处理
axios.interceptors.response.use(response => {
let code = response.data.code
if (code == 200) {
return response
} else if(code == 507||code == 502) {
Vue.prototype.$message.error('登录状态过期或者没有token,请重新登录！');
sessionStorage.clear()
router.push({path:'/login'})
console.log('507------',response)
// console.log('未登录')
// Vue.prototype.$message.error(response.data.msg);
}else if(code == 500) {
if(response.config.url == '/approvalTask/queryToDoTasks'){
console.log('流程图获取不到数据')
return;
}
if(response.config.url == '/anasz-smart-screen/importExcel/verifyExcelImport'){
return response
}
Vue.prototype.$message({message:response.data.msg,type:'error', customClass:'messageIndex_'});
return response
}else{
// console.log('其他--------',response)
return response
}
}, err => {
if (err && err.response) {
console.log('连接到服务器失败')
} else {
console.log('未知错误')
// Message.error('连接到服务器失败')
}
return Promise.resolve(err.response)
})
export function get(url, params = {},type = false) {
return new Promise((resolve, reject) => {
head = type
axios.get(url, {
params: params
}).then(response => {
if(response){
resolve(response.data);
}
})
.catch(err => {
reject(err)
})
})
}
export function post(url, data = {}, type = false, loading = true) {
return new Promise((resolve, reject) => {
head = type
axios.post(url, data)
.then(response => {
if(response){
resolve(response.data);
}
}, err => {
reject(err)
})
})
}
export function postDownloadResponse(url, params = {}, type = false, loading = true) {
return new Promise((resolve, reject) => {
head = type
axios.post(url, params,{
responseType: 'blob'
}).then(response => {
if (response) {
resolve(response);
}
}).catch(err => {
reject(err)
})
})
}
export function getOnlyOfficeToken() {
return new Promise((resolve, reject) => {
const url = "http://192.168.0.187:9999/token"; // 将此处URL更改为真正的OnlyOffice服务器地址
axios.get(url).then(response => {
resolve(response.data);
}).catch(error => {
reject(error);
});
});
}
src/views/Main/index.vue
...@@ -41,6 +41,7 @@ ...@@ -41,6 +41,7 @@
<p @click="jumpPage('元模型管理')">元模型管理</p> <p @click="jumpPage('元模型管理')">元模型管理</p>
<p>架构视图配置</p> <p>架构视图配置</p>
<p>元模型字典管理</p> <p>元模型字典管理</p>
<p @click="jumpPage('在线文档编制')">在线文档编制</p>
</div> </div>
<div class="menu_1_item"> <div class="menu_1_item">
<p>架构视图管理</p> <p>架构视图管理</p>
......
src/views/wenDangDemo/index.vue
...@@ -4,17 +4,20 @@ ...@@ -4,17 +4,20 @@
<div class="office" @click="gotoOffice"> <div class="office" @click="gotoOffice">
编辑文档 编辑文档
</div> </div>
<!-- <div v-if='show' class='qualityManual-container-office'>
<only-Office :option='option' />
</div> -->
</div> </div>
</template> </template>
<script> <script>
import { getOnlyOfficeToken } from '@/utils/request.js'; import onlyOffice from '@/components/onlyOffice'
export default { export default {
name: 'wenDangDemo', name: 'wenDangDemo',
components: { components: {
// , onlyOffice,
}, },
data() { data() {
return { return {
...@@ -39,17 +42,21 @@ export default { ...@@ -39,17 +42,21 @@ export default {
}, },
// "token": "CqzsKuP7jlI1aBatn4esS91ysFxDBR", // "token": "CqzsKuP7jlI1aBatn4esS91ysFxDBR",
}, },
//参考vabOnlyOffice组件参数配置
option: {
url: '',
isEdit: '',
fileType: '',
title: '',
lang: '',
isPrint: '',
},
show: false,
}; };
}, },
methods: { methods: {
gotoOffice() { gotoOffice() {
getOnlyOfficeToken().then(token => {
console.log("只有Office Token:", token);
// 这里可以对获得的 OnlyOffice Token 进行后续操作
}).catch(error => {
console.error("无法获取 OnlyOffice Token:", error);
});
let config = { let config = {
"document": { "document": {
"fileType": "docx", "fileType": "docx",
...@@ -61,10 +68,30 @@ export default { ...@@ -61,10 +68,30 @@ export default {
"editorConfig": { "editorConfig": {
"callbackUrl": "http://192.168.0.187:9999/url-to-callback.ashx" "callbackUrl": "http://192.168.0.187:9999/url-to-callback.ashx"
}, },
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.e30.LwimMJA3puF3ioGeS-tfczR3370GXBZMIL-bdpu4hOU", 'editorConfig': {
//语言：zh-CN简体中文/en英文
'lang': 'zh-CN',
//阅读状态 view/edit
'mode': 'edit',
'customization': {
//是否显示插件
'plugins': false,
},
"callbackUrl": "http://192.168.0.187:9999/url-to-callback.ashx"
},
// "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlZGl0b3JDb25maWciOnsiY2FsbGJhY2tVcmwiOiJodHRwOi8vbG9jYWxob3N0OjgwODIvdHJhY2s_ZmlsZU5hbWU9bmV3KyUyODIlMjkuZG9jeCZ1c2VyQWRkcmVzcz1EJTNBJTJGJTJGdGVtcCU1QyIsImNyZWF0ZVVybCI6Imh0dHA6Ly9sb2NhbGhvc3Q6ODA4Mi9jcmVhdGU_ZmlsZUV4dD1kb2N4JnNhbXBsZT1mYWxzZSIsImN1c3RvbWl6YXRpb24iOnsibG9nbyI6eyJpbWFnZSI6IiIsImltYWdlRW1iZWRkZWQiOiIiLCJ1cmwiOiJodHRwczovL3d3dy5vbmx5b2ZmaWNlLmNvbSJ9LCJnb2JhY2siOnsidXJsIjoiaHR0cDovL2xvY2FsaG9zdDo4MDgyLyJ9LCJhdXRvc2F2ZSI6dHJ1ZSwiY29tbWVudHMiOnRydWUsImNvbXBhY3RIZWFkZXIiOmZhbHNlLCJjb21wYWN0VG9vbGJhciI6ZmFsc2UsImNvbXBhdGlibGVGZWF0dXJlcyI6ZmFsc2UsImZvcmNlc2F2ZSI6ZmFsc2UsImhlbHAiOnRydWUsImhpZGVSaWdodE1lbnUiOmZhbHNlLCJoaWRlUnVsZXJzIjpmYWxzZSwic3VibWl0Rm9ybSI6ZmFsc2UsImFib3V0Ijp0cnVlLCJmZWVkYmFjayI6dHJ1ZX0sImVtYmVkZGVkIjp7fSwibGFuZyI6InpoIiwibW9kZSI6ImVkaXQiLCJ1c2VyIjp7ImlkIjoiMSIsIm5hbWUiOiJKb2huIFNtaXRoIiwiZ3JvdXAiOiIifSwidGVtcGxhdGVzIjpbeyJpbWFnZSI6IiIsInRpdGxlIjoiQmxhbmsiLCJ1cmwiOiJodHRwOi8vbG9jYWxob3N0OjgwODIvY3JlYXRlP2ZpbGVFeHQ9ZG9jeCZzYW1wbGU9ZmFsc2UifSx7ImltYWdlIjoiaHR0cDovL2xvY2FsaG9zdDo4MDgyL2Nzcy9pbWcvZmlsZV9kb2N4LnN2ZyIsInRpdGxlIjoiV2l0aCBzYW1wbGUgY29udGVudCIsInVybCI6Imh0dHA6Ly9sb2NhbGhvc3Q6ODA4Mi9jcmVhdGU_ZmlsZUV4dD1kb2N4JnNhbXBsZT10cnVlIn1dfSwiZG9jdW1lbnRUeXBlIjoid29yZCIsImRvY3VtZW50Ijp7ImluZm8iOnsib3duZXIiOiJNZSIsInVwbG9hZGVkIjoiVGh1IE5vdiAzMCAyMDIzIn0sInBlcm1pc3Npb25zIjp7ImNvbW1lbnQiOnRydWUsImNvcHkiOnRydWUsImRvd25sb2FkIjp0cnVlLCJlZGl0Ijp0cnVlLCJwcmludCI6dHJ1ZSwiZmlsbEZvcm1zIjp0cnVlLCJtb2RpZnlGaWx0ZXIiOnRydWUsIm1vZGlmeUNvbnRlbnRDb250cm9sIjp0cnVlLCJyZXZpZXciOnRydWUsImNoYXQiOnRydWUsImNvbW1lbnRHcm91cHMiOnt9LCJwcm90ZWN0Ijp0cnVlfSwiZmlsZVR5cGUiOiJkb2N4Iiwia2V5IjoiMTk3MzA3MTc0NSIsInVybFVzZXIiOiJodHRwOi8vbG9jYWxob3N0OjgwODIvZG93bmxvYWQ_ZmlsZU5hbWU9bmV3KyUyODIlMjkuZG9jeCZ1c2VyQWRkcmVzc0QlM0ElMkYlMkZ0ZW1wJTVDIiwidGl0bGUiOiJuZXcgKDIpLmRvY3giLCJ1cmwiOiJodHRwOi8vbG9jYWxob3N0OjgwODIvZG93bmxvYWQ_ZmlsZU5hbWU9bmV3KyUyODIlMjkuZG9jeCZ1c2VyQWRkcmVzcz1EJTNBJTJGJTJGdGVtcCU1QyIsImRpcmVjdFVybCI6IiIsInJlZmVyZW5jZURhdGEiOnsiaW5zdGFuY2VJZCI6Imh0dHA6Ly9sb2NhbGhvc3Q6ODA4MiIsImZpbGVLZXkiOiJ7XCJ1c2VyQWRkcmVzc1wiOlwiMTkyLjE2OC4wLjE4N1wiLFwiZmlsZU5hbWVcIjpcIm5ldyAoMikuZG9jeFwifSJ9fSwidHlwZSI6ImRlc2t0b3AifQ.xhSqCy12e38LQUyia_FD1dfiBoAvrcItLVa-kzr5Xpo",
}; };
var docEditor = new DocsAPI.DocEditor("placeholder", config); var docEditor = new DocsAPI.DocEditor("placeholder", config);
// this.show = true
// // getAction('/onlyfile/file/queryById', { id: this.id }).then(res => {
// this.option.isEdit = false
// this.option.lang = 'zh-CN'
// this.option.url = 'http://192.168.0.187:9999/example/editor?fileName=new.docx'
// this.option.title = '123'
// this.option.fileType = 'docx'
// this.option.isPrint = false
}, },
} }
} }
...@@ -80,4 +107,9 @@ export default { ...@@ -80,4 +107,9 @@ export default {
font-size: 20px; font-size: 20px;
cursor: pointer; cursor: pointer;
} }
.qualityManual-container-office {
height: 100%;
width: 100%;
padding: 0 !important;
}
</style> </style>
\ No newline at end of file
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!