[add] init
This commit is contained in:
lideqin
@@ -0,0 +1,7 @@
|
||||
[*.{js,jsx,ts,tsx,vue}]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
max_line_length = 100
|
||||
+23
@@ -0,0 +1,23 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -1,92 +1,26 @@
|
||||
# onlyoffice-front
|
||||
|
||||
onlyoffice服务
|
||||
|
||||
|
||||
## Getting started
|
||||
|
||||
To make it easy for you to get started with GitLab, here's a list of recommended next steps.
|
||||
|
||||
Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
|
||||
|
||||
## Add your files
|
||||
|
||||
- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
|
||||
- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
|
||||
|
||||
## Project setup
|
||||
```
|
||||
cd existing_repo
|
||||
git remote add origin http://10.10.10.43:19090/laws-chery/onlyoffice-front.git
|
||||
git branch -M master
|
||||
git push -uf origin master
|
||||
npm install
|
||||
```
|
||||
|
||||
## Integrate with your tools
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
- [ ] [Set up project integrations](http://10.10.10.43:19090/laws-chery/onlyoffice-front/-/settings/integrations)
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
## Collaborate with your team
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
|
||||
- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
|
||||
- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
|
||||
- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
|
||||
- [ ] [Set auto-merge](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
|
||||
|
||||
## Test and Deploy
|
||||
|
||||
Use the built-in continuous integration in GitLab.
|
||||
|
||||
- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
|
||||
- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing(SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
|
||||
- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
|
||||
- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
|
||||
- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
|
||||
|
||||
***
|
||||
|
||||
# Editing this README
|
||||
|
||||
When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thank you to [makeareadme.com](https://www.makeareadme.com/) for this template.
|
||||
|
||||
## Suggestions for a good README
|
||||
Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
|
||||
|
||||
## Name
|
||||
Choose a self-explaining name for your project.
|
||||
|
||||
## Description
|
||||
Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
|
||||
|
||||
## Badges
|
||||
On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
|
||||
|
||||
## Visuals
|
||||
Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
|
||||
|
||||
## Installation
|
||||
Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
|
||||
|
||||
## Usage
|
||||
Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
|
||||
|
||||
## Support
|
||||
Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
|
||||
|
||||
## Roadmap
|
||||
If you have ideas for releases in the future, it is a good idea to list them in the README.
|
||||
|
||||
## Contributing
|
||||
State if you are open to contributions and what your requirements are for accepting them.
|
||||
|
||||
For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
|
||||
|
||||
You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
|
||||
|
||||
## Authors and acknowledgment
|
||||
Show your appreciation to those who have contributed to the project.
|
||||
|
||||
## License
|
||||
For open source projects, say how it is licensed.
|
||||
|
||||
## Project status
|
||||
If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
module.exports = {
|
||||
presets: [
|
||||
'@vue/cli-plugin-babel/preset'
|
||||
],
|
||||
plugins: [
|
||||
[
|
||||
'import',
|
||||
{
|
||||
libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
Generated
+12854
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "onlyoffice-front",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"ant-design-vue": "1.7.2",
|
||||
"axios": "^1.5.0",
|
||||
"babel-plugin-import": "^1.13.8",
|
||||
"core-js": "^3.6.5",
|
||||
"js-base64": "^3.7.6",
|
||||
"less": "3.9.0",
|
||||
"less-loader": "4.1.0",
|
||||
"vue": "^2.6.11",
|
||||
"vue-router": "^3.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-router": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"eslint-plugin-import": "^2.20.2",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
window._CONFIG = {}
|
||||
// onlyOffice文件获取地址
|
||||
window._CONFIG.documentUrl = 'http://10.0.10.87:8188/laws-sinotruk/onlyOffice/downLoadFile?path='
|
||||
// onlyOffice文件保存回调地址（后端服务的ip端口，最后一个/是必须的）
|
||||
window._CONFIG.callbackUrl = 'http://10.0.10.87:8188/'
|
||||
// onlyOffice自定义编辑器的地址（plugins的前端路径，最后一个/是必须的）
|
||||
window._CONFIG.configUrl = 'http://10.0.10.87:8092/'
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||
<!--开发环境-->
|
||||
<% if (process.env.NODE_ENV === 'development' ) { %>
|
||||
<!-- onlyOffice服务器地址-->
|
||||
<script type="text/javascript" src="http://10.10.10.45:8107/web-apps/apps/api/documents/api.js"></script>
|
||||
<script src="<%= BASE_URL %>dev_api_config.js"></script>
|
||||
<% } %>
|
||||
<!--测试环境-->
|
||||
<% if (process.env.NODE_ENV === 'production' ) { %>
|
||||
<!--客户环境-->
|
||||
<!--<script type="text/javascript" src="http://onlyoffice.sinotruk.com/web-apps/apps/api/documents/api.js"></script>-->
|
||||
<!--公司测试环境-->
|
||||
<script type="text/javascript" src="http://10.10.10.45:8107/web-apps/apps/api/documents/api.js"></script>
|
||||
<script src="<%= BASE_URL %>prod_api_config.js"></script>
|
||||
<% } %>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
||||
Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,7 @@
|
||||
window._CONFIG = {}
|
||||
// onlyOffice文件获取地址
|
||||
window._CONFIG.documentUrl = 'http://laws-sinotruk-server-kmc2c.yf-grp:8080/laws-sinotruk/onlyOffice/downLoadFile?path='
|
||||
// onlyOffice文件保存回调地址（后端服务的ip端口，最后一个/是必须的）
|
||||
window._CONFIG.callbackUrl = 'http://laws-sinotruk-server-kmc2c.yf-grp:8080/'
|
||||
// onlyOffice自定义编辑器的地址（plugins的前端路径，最后一个/是必须的）
|
||||
window._CONFIG.configUrl = 'http://srms-test.sinotruk.com/onlyofficeplugins/'
|
||||
+54
@@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<a-locale-provider :locale="zh_CN">
|
||||
<div id="app">
|
||||
<!-- <div id="nav">-->
|
||||
<!-- <router-link to="/">Home</router-link> |-->
|
||||
<!-- <router-link to="/about">About</router-link>-->
|
||||
<!-- </div>-->
|
||||
<router-view />
|
||||
</div>
|
||||
</a-locale-provider>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import zh_CN from 'ant-design-vue/lib/locale/zh_CN.js'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
zh_CN
|
||||
}
|
||||
},
|
||||
created () {
|
||||
document.title = '在线编辑'
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="less">
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#nav {
|
||||
padding: 30px;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,13 @@
|
||||
import { getAction, postAction } from './manage.js'
|
||||
|
||||
const addFile = (params) => getAction('/onlyOffice/saveEditFile', params)
|
||||
const getList = (params) => getAction('/onlyOffice/pageList', params)
|
||||
const deleteFile = (params) => postAction('/onlyOffice/delete', params)
|
||||
const historyList = (params) => getAction('/onlyOffice/getAllOnlyOfficeHisFileById', params)
|
||||
|
||||
export {
|
||||
addFile,
|
||||
getList,
|
||||
deleteFile,
|
||||
historyList
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
import { axios } from '../utils/request.js'
|
||||
import Vue from 'vue'
|
||||
|
||||
export function postAction (url, parameter) {
|
||||
return axios({
|
||||
url: url,
|
||||
method: 'post',
|
||||
data: parameter
|
||||
})
|
||||
}
|
||||
|
||||
export function getAction (url, parameter) {
|
||||
return axios({
|
||||
url: url,
|
||||
method: 'get',
|
||||
params: parameter
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载文件 用于excel导出
|
||||
* @param url
|
||||
* @param parameter
|
||||
* @returns {*}
|
||||
*/
|
||||
export function downFile (url, parameter) {
|
||||
return axios({
|
||||
url: url,
|
||||
params: parameter,
|
||||
method: 'get',
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 下载文件
|
||||
* @param url 文件路径
|
||||
* @param fileName 文件名
|
||||
* @param parameter
|
||||
* @returns {*}
|
||||
*/
|
||||
export function downloadFile (url, fileName, parameter) {
|
||||
return downFile(url, parameter).then((data) => {
|
||||
if (!data || data.size === 0) {
|
||||
Vue.prototype.$message.warning('文件下载失败')
|
||||
return
|
||||
}
|
||||
if (typeof window.navigator.msSaveBlob !== 'undefined') {
|
||||
window.navigator.msSaveBlob(new Blob([data]), fileName)
|
||||
} else {
|
||||
const url = window.URL.createObjectURL(new Blob([data]))
|
||||
const link = document.createElement('a')
|
||||
link.style.display = 'none'
|
||||
link.href = url
|
||||
link.setAttribute('download', fileName)
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
document.body.removeChild(link) // 下载完成移除元素
|
||||
window.URL.revokeObjectURL(url) // 释放掉blob对象
|
||||
}
|
||||
})
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
+25
@@ -0,0 +1,25 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import less from 'less'
|
||||
import { Button, message, Table, Tooltip, Modal, Spin, Form, Input, LocaleProvider } from 'ant-design-vue'
|
||||
|
||||
Vue.use(less)
|
||||
Vue.use(Button)
|
||||
Vue.use(Table)
|
||||
Vue.use(Tooltip)
|
||||
Vue.use(Modal)
|
||||
Vue.use(Spin)
|
||||
Vue.use(Form)
|
||||
Vue.use(Input)
|
||||
Vue.use(LocaleProvider)
|
||||
|
||||
Vue.prototype.$message = message
|
||||
Vue.prototype.$confirm = Modal.confirm
|
||||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
render: (h) => h(App)
|
||||
}).$mount('#app')
|
||||
@@ -0,0 +1,49 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
redirect: '/editorPage'
|
||||
},
|
||||
{
|
||||
path: '/List',
|
||||
name: 'List',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/List.vue')
|
||||
},
|
||||
{
|
||||
path: '/previewPage',
|
||||
name: 'PreviewPage',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/PreviewPage.vue')
|
||||
},
|
||||
{
|
||||
path: '/editorPage',
|
||||
name: 'EditorPage',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (about.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/EditorPage.vue')
|
||||
},
|
||||
{
|
||||
path: '/previewHistoryPage',
|
||||
name: 'PreviewHistoryPage',
|
||||
component: () => import('../views/PreviewHistoryPage')
|
||||
}
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
@@ -0,0 +1,17 @@
|
||||
import axios from 'axios'
|
||||
|
||||
const apiBaseUrl = '/laws-sinotruk'
|
||||
|
||||
// 创建 axios 实例
|
||||
const service = axios.create({
|
||||
// baseURL: '/laws-sinotruk',
|
||||
baseURL: apiBaseUrl, // api base_url
|
||||
timeout: 10000 // 请求超时时间
|
||||
})
|
||||
|
||||
// response interceptor
|
||||
service.interceptors.response.use((response) => {
|
||||
return response.data
|
||||
})
|
||||
|
||||
export { service as axios }
|
||||
@@ -0,0 +1,439 @@
|
||||
<template>
|
||||
<div id="placeholder" class="nav" style="height: 100vh">
|
||||
<!-- <div class="box-text download-btn" @click="handleDownload">下载</div>-->
|
||||
<div class="box-text" @click="handleRestore">还原</div>
|
||||
<div class="file-box" v-if="isFileDisplay">
|
||||
<div class="textTitle">
|
||||
<span class="textTitleFile">还原版本</span>
|
||||
<span class="closeFile" @click="closeFileClick">×</span>
|
||||
</div>
|
||||
<div class="fileContent" v-if="fileList && fileList.length > 0">
|
||||
<div class="fileContentText" v-for="(item,index) in fileList" :key="index">
|
||||
<span @click="viewFileClick(item)" class="timeClass">{{ item.createTime }}</span>
|
||||
<span @click="viewFileClick(item)" class="viewClass">预览</span>
|
||||
<span @click="fileContentClick(item)" class="viewClass">还原</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="noFile" v-else>暂无历史版本</div>
|
||||
</div>
|
||||
<div id="iframeEditor"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { historyList } from '../api/fileApi'
|
||||
import { Base64 } from 'js-base64'
|
||||
import { downloadFile } from '../api/manage'
|
||||
|
||||
const { location } = window
|
||||
|
||||
export default {
|
||||
name: 'editor',
|
||||
data () {
|
||||
return {
|
||||
docEditor: null,
|
||||
documentUrl: window._CONFIG.documentUrl,
|
||||
callbackUrl: window._CONFIG.callbackUrl,
|
||||
isFileDisplay: false,
|
||||
fileList: [],
|
||||
reloadEditor: true,
|
||||
currentFilePath: null // 当前页面展示文件的path
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
document.title = '在线编辑'
|
||||
this.connectEditor()
|
||||
// 从主系统跳过来需要调这个方法，目前系统内跳不触发
|
||||
if (window.addEventListener) {
|
||||
window.addEventListener('load', this.connectEditor)
|
||||
window.addEventListener('resize', this.fixSize)
|
||||
} else if (window.attachEvent) {
|
||||
window.attachEvent('onload', this.connectEditor)
|
||||
window.attachEvent('onresize', this.fixSize)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
innerAlert (message) {
|
||||
if (console && console.log) console.log(message)
|
||||
},
|
||||
onAppReady () {
|
||||
console.log(123)
|
||||
this.innerAlert('Document editor ready')
|
||||
},
|
||||
onDocumentStateChange (event) {
|
||||
const title = document.title.replace(/\*$/g, '')
|
||||
document.title = title + (event.data ? '*' : '')
|
||||
// console.log('尝试获取dom')
|
||||
// console.log(document.getElementsByTagName('iframe'))
|
||||
// console.log(document.getElementsByTagName('iframe')[0])
|
||||
// console.log(document.getElementsByTagName('iframe')[0].contentDocument)
|
||||
// console.log(document.getElementsByTagName('iframe')[0].contentWindow)
|
||||
// console.log(document.getElementsByTagName('iframe')[0].contentWindow.document)
|
||||
// console.log(document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById('id_main_view'))
|
||||
// console.log(document.getElementsByTagName('iframe')[0].contentDocument.getElementById('id_main_view'))
|
||||
},
|
||||
onRequestEditRights () {
|
||||
location.href = location.href.replace(RegExp('mode=view', 'i'), '')
|
||||
},
|
||||
onRequestHistory (event) {
|
||||
const historyObj =
|
||||
[
|
||||
{
|
||||
changes: null,
|
||||
key: this.$route.query.attId,
|
||||
version: 1,
|
||||
created: '2022-10-17 14:17:09',
|
||||
user: { id: this.$route.query.userId, name: this.$route.query.userName }
|
||||
}
|
||||
] || null
|
||||
|
||||
this.docEditor.refreshHistory({
|
||||
currentVersion: '1',
|
||||
history: historyObj
|
||||
})
|
||||
},
|
||||
onRequestHistoryData (data) {
|
||||
console.log(data)
|
||||
const version = data.data
|
||||
const historyData =
|
||||
[
|
||||
{
|
||||
'version': 1,
|
||||
'key': this.$route.query.attId,
|
||||
'url': this.documentUrl + this.$route.query.filePath + this.$route.query.fileName
|
||||
}
|
||||
] || null
|
||||
this.docEditor.setHistoryData(historyData[version - 1])
|
||||
},
|
||||
onRequestHistoryClose (event) {
|
||||
document.location.reload()
|
||||
},
|
||||
onError (event) {
|
||||
console.log(event)
|
||||
if (event) this.innerAlert(event.data)
|
||||
},
|
||||
onOutdatedVersion (event) {
|
||||
// console.log(event);
|
||||
location.reload(true)
|
||||
},
|
||||
replaceActionLink (href, linkParam) {
|
||||
let link
|
||||
const actionIndex = href.indexOf('&action=')
|
||||
// eslint-disable-next-line eqeqeq
|
||||
if (actionIndex != -1) {
|
||||
const endIndex = href.indexOf('&', actionIndex + '&action='.length)
|
||||
// eslint-disable-next-line eqeqeq
|
||||
if (endIndex != -1) {
|
||||
link = `${
|
||||
href.substring(0, actionIndex) + href.substring(endIndex)
|
||||
}&action=${encodeURIComponent(linkParam)}`
|
||||
} else {
|
||||
link = `${href.substring(0, actionIndex)}&action=${encodeURIComponent(
|
||||
linkParam
|
||||
)}`
|
||||
}
|
||||
} else {
|
||||
link = `${href}&action=${encodeURIComponent(linkParam)}`
|
||||
}
|
||||
return link
|
||||
},
|
||||
onMakeActionLink (event) {
|
||||
const actionData = event.data
|
||||
const linkParam = JSON.stringify(actionData)
|
||||
this.docEditor.setActionLink(this.replaceActionLink(location.href, linkParam))
|
||||
},
|
||||
fixSize () {
|
||||
const wrapEl = document.getElementsByClassName('form')
|
||||
if (wrapEl.length) {
|
||||
// eslint-disable-next-line no-restricted-globals
|
||||
wrapEl[0].style.height = `${screen.availHeight}px`
|
||||
window.scrollTo(0, -1)
|
||||
wrapEl[0].style.height = `${window.innerHeight}px`
|
||||
}
|
||||
},
|
||||
onDocumentSaved () {
|
||||
console.log(12)
|
||||
},
|
||||
connectEditor (fileInfo = {}) {
|
||||
const nowTime = new Date().getTime()
|
||||
let url = ''
|
||||
let key = ''
|
||||
if (fileInfo.id) {
|
||||
url = this.documentUrl + fileInfo.filePath
|
||||
key = this.$route.query.key + nowTime
|
||||
this.currentFilePath = fileInfo.filePath
|
||||
} else {
|
||||
url = `${this.documentUrl}${this.$route.query.filePath}`
|
||||
key = this.$route.query.key + nowTime
|
||||
this.currentFilePath = this.$route.query.filePath
|
||||
}
|
||||
this.docEditor = new DocsAPI.DocEditor('iframeEditor', {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
type: 'desktop',
|
||||
// 打开文档类型
|
||||
// text对应各种文档类型(.doc, .docm, .docx, .dot, .dotm, .dotx, .epub, .fodt, .htm, .html, .mht, .odt, .ott, .pdf, .rtf, .txt, .djvu, .xps)
|
||||
// spreadsheet对应表格类型(.csv, .fods, .ods, .ots, .xls, .xlsm, .xlsx, .xlt, .xltm, .xltx)
|
||||
// presentation对应PPT类型(.fodp, .odp, .otp, .pot, .potm, .potx, .pps, .ppsm, .ppsx, .ppt, .pptm, .pptx)
|
||||
documentType: 'word',
|
||||
token: 'secret',
|
||||
document: {
|
||||
title: this.$route.query.fileName,
|
||||
url: url,
|
||||
fileType: this.$route.query.fileType,
|
||||
key: key,
|
||||
info: {
|
||||
author: this.$route.query.userName,
|
||||
created: 'Wed Oct 12 2022'
|
||||
},
|
||||
permissions: {
|
||||
comment: true, // 定义是否可以注释文档。如果注释权限设置为true，则文档侧栏将包含“注释”菜单选项；只有将mode参数设置为edit时才生效，默认值与edit参数的值一致
|
||||
download: false, // 定义是否可以下载文档或仅在线查看或编辑文档。如果下载权限设置为“false”下载为菜单选项将没有。默认值为true
|
||||
edit: true, // 文件是否可以编辑，false时文件不可编辑
|
||||
fillForms: true, // 定义是否能在文档中填充表单
|
||||
modifyFilter: true, // 定义过滤器是否可以全局应用（true）影响所有其他用户，或局部应用（false），即仅适用于当前用户。如果将mode参数设置为edit，则过滤器修改仅对电子表格编辑器可用。默认值为true。
|
||||
modifyContentControl: true, // 定义是否可以更改内容控件设置。仅当mode参数设置为edit时，内容控件修改才可用于文档编辑器。默认值为true。
|
||||
review: true, // 第一是否显示审阅文档菜单
|
||||
'commentGroups': {
|
||||
'edit': ['Group2', ''],
|
||||
'remove': [''],
|
||||
'view': ''
|
||||
},
|
||||
'copy': true,
|
||||
'deleteCommentAuthorOnly': false,
|
||||
'editCommentAuthorOnly': false,
|
||||
'print': true,
|
||||
'reviewGroups': ['Group1', 'Group2', '']
|
||||
}
|
||||
},
|
||||
editorConfig: {
|
||||
actionLink: null,
|
||||
mode: 'edit',
|
||||
lang: 'zh',
|
||||
query: {
|
||||
id: 123456
|
||||
},
|
||||
callbackUrl: `${this.callbackUrl}laws-sinotruk/onlyOffice/receiveFile?fileId=${this.$route.query.fileId}&fileNm=${this.$route.query.fileName}&key=${key}&business=${this.$route.query.business}`,
|
||||
user: {
|
||||
id: this.$route.query.userId,
|
||||
name: this.$route.query.userName
|
||||
},
|
||||
// embedded部分仅适用于嵌入式文档类型（请参阅config部分以了解如何定义嵌入式文档类型）。它允许更改设置，这些设置定义嵌入式模式下按钮的行为。
|
||||
embedded: {
|
||||
// saveUrl: this.documentUrl + this.$route.query.filePath + this.$route.query.fileName, // 定义允许将文档保存到用户个人计算机上的绝对URL。
|
||||
// embedUrl: this.documentUrl + this.$route.query.filePath + this.$route.query.fileName, // 定义文档的绝对URL，以作为嵌入到网页中的文档的源文件
|
||||
// shareUrl: this.documentUrl + this.$route.query.filePath + this.fileName, // 定义允许其他用户共享此文档的绝对URL。
|
||||
saveUrl: `${this.documentUrl}${this.$route.query.filePath}`, // 定义允许将文档保存到用户个人计算机上的绝对URL。
|
||||
embedUrl: `${this.documentUrl}${this.$route.query.filePath}`, // 定义文档的绝对URL，以作为嵌入到网页中的文档的源文件
|
||||
shareUrl: `${this.documentUrl}${this.$route.query.filePath}`, // 定义允许其他用户共享此文档的绝对URL。
|
||||
toolbarDocked: 'top' // 定义嵌入式查看器工具栏的位置，可以为top或bottom。
|
||||
},
|
||||
// 定制部分允许自定义编辑器界面，使其看起来像您的其他产品，并更改是否存在其他按钮，链接，更改徽标和编辑者所有者详细信息。
|
||||
customization: {
|
||||
about: true,
|
||||
chat: true, // 定义“聊天”菜单按钮是显示还是隐藏；请注意，如果您隐藏“聊天”按钮，则相应的聊天功能也将被禁用。默认值为true。
|
||||
comments: true, // 定义是显示还是隐藏“注释”菜单按钮；请注意，如果您隐藏“评论”按钮，则相应的评论功能将仅可用于查看，评论的添加和编辑将不可用。默认值为true。
|
||||
feedback: true, // 反馈配置信息
|
||||
forcesave: true, // 定义保存按钮是否显示默认false
|
||||
autosave: false,
|
||||
'features': {
|
||||
'spellcheck': {
|
||||
'mode': false,
|
||||
'change': true
|
||||
}
|
||||
},
|
||||
// 定义“打开文件位置”菜单按钮和右上角按钮的设置
|
||||
goback: {
|
||||
// url: 'http://localhost/example/', // 单击“打开文件位置”菜单按钮时将打开的网站地址的绝对URL
|
||||
},
|
||||
unit: 'cm', // 定义在标尺和对话框中使用的度量单位。可以采用以下值：cm -厘米，pt-点，inch -英寸。默认值为厘米（cm）。
|
||||
zoom: 100 // 定义以百分比为单位的文档显示缩放值。可以取大于0的值。对于文本文档和演示文稿，可以将此参数设置为-1（使文档适合页面选项）或-2（使文档页面宽度适合编辑器页面）。默认值为100。
|
||||
},
|
||||
fileChoiceUrl: '',
|
||||
// 定义是否将启动插件并可用。默认值为true。
|
||||
plugins: {
|
||||
autostart: ['asc.{0616AE85-5DBE-4B6B-A0A9-455C4F1503AD}'],
|
||||
pluginsData: [
|
||||
window._CONFIG.configUrl + 'page1/config.json'
|
||||
]
|
||||
}
|
||||
},
|
||||
events: {
|
||||
'onAppReady': this.onAppReady,
|
||||
'onDocumentStateChange': this.onDocumentStateChange, // 文档改变后的回调
|
||||
'onRequestEditRights': this.onRequestEditRights, // 用户尝试通过单击“编辑文档”按钮尝试将文档从视图切换到编辑模式时调用的函数。调用该函数时，必须在编辑模式下再次初始化编辑器。如果未声明该方法，则不会显示“编辑”按钮。
|
||||
'onError': this.onError,
|
||||
'onRequestHistory': this.onRequestHistory, // 用户尝试通过单击“版本历史记录”按钮显示文档版本历史记录时调用的函数。要显示文档版本历史，您必须调用refreshHistory方法。如果未声明该方法和onRequestHistoryData方法，则不会显示“版本历史记录”按钮。
|
||||
'onRequestHistoryData': this.onRequestHistoryData, // 用户尝试单击文档版本历史记录中的特定文档版本时调用的函数。
|
||||
'onRequestHistoryClose': this.onRequestHistoryClose, // 当用户尝试通过单击“关闭历史记录”按钮来查看文档版本历史记录时，试图调用该文档时调用的函数。调用该函数时，必须在编辑模式下再次初始化编辑器。如果未声明该方法，则不会显示“关闭历史记录”按钮。
|
||||
'onOutdatedVersion': this.onOutdatedVersion, // 使用旧的document.key值打开文档进行编辑时，显示错误后调用的函数，该值用于编辑先前的文档版本并已成功保存。调用此事件时，必须使用新的document.key重新初始化编辑器。
|
||||
'onMakeActionLink': this.onMakeActionLink,
|
||||
'onDocumentSaved': this.onDocumentSaved
|
||||
}
|
||||
})
|
||||
console.log(this.docEditor)
|
||||
// this.fixSize()
|
||||
},
|
||||
/**
|
||||
* 还原，打开历史记录弹框
|
||||
*/
|
||||
handleRestore () {
|
||||
this.isFileDisplay = true
|
||||
this.initHistoryList()
|
||||
},
|
||||
initHistoryList () {
|
||||
historyList({ fileId: this.$route.query.fileId }).then(res => {
|
||||
if (res.success) {
|
||||
this.fileList = res.result || []
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 关闭历史记录列表
|
||||
*/
|
||||
closeFileClick () {
|
||||
this.isFileDisplay = false
|
||||
},
|
||||
/**
|
||||
* 预览文件
|
||||
* @param file
|
||||
*/
|
||||
viewFileClick (file) {
|
||||
const { href } = this.$router.resolve({
|
||||
path: '/previewHistoryPage',
|
||||
query: { ...this.$route.query, fileInfo: JSON.stringify(file) }
|
||||
})
|
||||
window.open(href, '_blank')
|
||||
},
|
||||
/**
|
||||
* 确定回滚到某个版本
|
||||
*/
|
||||
fileContentClick (file) {
|
||||
this.docEditor.destroyEditor()
|
||||
// 第一次进入在线编辑上面的方法可能会无效，使用下面的方法强行删除dom元素
|
||||
const parentDom = document.getElementById('placeholder')
|
||||
const iframe = parentDom.children.namedItem('frameEditor')
|
||||
console.log('看看部署上没有')
|
||||
if (iframe) {
|
||||
const divDom = document.createElement('div')
|
||||
divDom.setAttribute('id', 'iframeEditor')
|
||||
iframe.remove()
|
||||
parentDom.appendChild(divDom)
|
||||
}
|
||||
this.connectEditor(file)
|
||||
this.isFileDisplay = false
|
||||
},
|
||||
handleDownload () {
|
||||
if (!this.currentFilePath) {
|
||||
return
|
||||
}
|
||||
const path = '/onlyOffice/downLoadFileRoma?path=' + this.currentFilePath || this.$route.query.filePath
|
||||
downloadFile(path, this.$route.query.fileName)
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (window.removeEventListener) {
|
||||
window.removeEventListener('load', this.connectEditor)
|
||||
window.removeEventListener('resize', this.fixSize)
|
||||
} else if (window.detachEvent) {
|
||||
window.detachEvent('onload', this.connectEditor)
|
||||
window.detachEvent('onresize', this.fixSize)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.box-text {
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
right: 40px;
|
||||
top: 6px;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
background-color: #446995;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
right: 90px;
|
||||
}
|
||||
|
||||
.file-box {
|
||||
width: 500px;
|
||||
height: auto;
|
||||
position: fixed;
|
||||
right: 40px;
|
||||
top: 28px;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 1px 1px 7px #c6c1c1;
|
||||
}
|
||||
|
||||
.textTitle {
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #E5E6EB;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.textTitleFile {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: #1D2129;
|
||||
font-family: PingFang SC-Medium, PingFang SC;
|
||||
}
|
||||
|
||||
.closeFile {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
font-size: 30px;
|
||||
top: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fileContent {
|
||||
padding: 24px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.fileContentText {
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.noFile {
|
||||
height: 200px;
|
||||
text-align: center;
|
||||
line-height: 200px;
|
||||
color: #4E5969;
|
||||
font-size: 14px;
|
||||
font-family: Phetsarath-Regular, Phetsarath;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.timeClass {
|
||||
font-size: 14px;
|
||||
font-family: Phetsarath-Regular, Phetsarath;
|
||||
font-weight: 400;
|
||||
color: #4E5969;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.timeClass:hover {
|
||||
color: rgb(64, 158, 255);
|
||||
}
|
||||
|
||||
.viewClass {
|
||||
font-size: 14px;
|
||||
font-family: Phetsarath-Regular, Phetsarath;
|
||||
font-weight: 400;
|
||||
color: rgb(64, 158, 255);
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,223 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<a-form layout="inline" @keyup.enter.native="searchQuery">
|
||||
<a-row :gutter="24">
|
||||
<!--标准号/标准名称-->
|
||||
<a-col :md="6" :sm="12">
|
||||
<a-form-item label="文档名称">
|
||||
<a-input placeholder="请输入文档名称" v-model="queryParam.fileName"></a-input>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :md="6" :sm="8">
|
||||
<a-button type="primary" @click="searchQuery" icon="search" class="search-btn">查询</a-button>
|
||||
<a-button type="primary" @click="searchReset" icon="reload" ghost class="search-btn">重置</a-button>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<a-button class="operate-btn" type="primary" @click="handleAdd">新增</a-button>
|
||||
<a-table
|
||||
bordered
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
:pagination="ipagination"
|
||||
@change="tableOnChange">
|
||||
|
||||
<template slot="text" slot-scope="text">
|
||||
<a-tooltip overlay-class-name="tooltip-style">
|
||||
<template slot="title">{{ text }}</template>
|
||||
<div class="table-text">{{ text }}</div>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
|
||||
<template slot="operation" slot-scope="text, record">
|
||||
<a class="table-operate-btn" @click="handleEdit(record)">编辑</a>
|
||||
<!--<a class="table-operate-btn" @click="handleDelete(record.id)">删除</a>-->
|
||||
</template>
|
||||
|
||||
</a-table>
|
||||
|
||||
<add-file-modal ref="formModal" @ok="modalFormOk" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AddFileModal from './modules/AddFileModal.vue'
|
||||
import { getList, deleteFile } from '../api/fileApi.js'
|
||||
|
||||
export default {
|
||||
name: 'List',
|
||||
components: { AddFileModal },
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
/* 分页参数 */
|
||||
ipagination: {
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
pageSizeOptions: ['10', '20', '30'],
|
||||
showTotal: (total, range) => {
|
||||
return range[0] + '-' + range[1] + ' ' + '共' + total + '项'
|
||||
},
|
||||
showQuickJumper: true,
|
||||
showSizeChanger: true,
|
||||
total: 0
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
dataIndex: 'fileName',
|
||||
title: '文档名称',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
dataIndex: 'createTime',
|
||||
title: '创建时间',
|
||||
width: 250,
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
dataIndex: 'updateTime',
|
||||
title: '更新时间',
|
||||
width: 250,
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'text' }
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
fixed: 'right',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'operation' }
|
||||
}
|
||||
],
|
||||
dataSource: [],
|
||||
url: {
|
||||
list: '/onlyoffice/pageList'
|
||||
},
|
||||
queryParam: {}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.loadData()
|
||||
},
|
||||
methods: {
|
||||
tableOnChange (pagination) {
|
||||
this.ipagination = pagination
|
||||
this.loadData()
|
||||
},
|
||||
loadData (arg) {
|
||||
if (!this.url.list) {
|
||||
this.$message.error('请设置url.list属性!')
|
||||
return
|
||||
}
|
||||
// 加载数据 若传入参数1则加载第一页的内容
|
||||
if (arg === 1) {
|
||||
this.ipagination.current = 1
|
||||
}
|
||||
const params = {
|
||||
pageNo: this.ipagination.current,
|
||||
pageSize: this.ipagination.pageSize,
|
||||
column: 'createTime',
|
||||
order: 'desc',
|
||||
fileName: this.queryParam.fileName ? '*' + this.queryParam.fileName + '*' : null
|
||||
}
|
||||
this.loading = true
|
||||
getList(params).then((res) => {
|
||||
if (res.success) {
|
||||
// update-begin---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
|
||||
this.dataSource = res.result.records || res.result
|
||||
if (res.result.total) {
|
||||
this.ipagination.total = res.result.total
|
||||
} else {
|
||||
this.ipagination.total = 0
|
||||
}
|
||||
console.log(this.dataSource)
|
||||
// update-end---author:zhangyafei Date:20201118 for：适配不分页的数据列表------------
|
||||
} else {
|
||||
// this.$message.warning(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
handleAdd () {
|
||||
this.$refs.formModal.add()
|
||||
},
|
||||
handleEdit (record) {
|
||||
const { href } = this.$router.resolve({
|
||||
path: '/editorPage',
|
||||
query: {
|
||||
filePath: record.editFilePath,
|
||||
fileName: record.fileName,
|
||||
fileType: 'docx',
|
||||
fileId: record.id,
|
||||
key: record.id
|
||||
}
|
||||
})
|
||||
window.open(href, '_blank')
|
||||
},
|
||||
handleDelete (id) {
|
||||
this.$confirm({
|
||||
title: '确认删除？',
|
||||
content: '确定删除吗?',
|
||||
onOk: () => {
|
||||
deleteFile({ id: id }).then((res) => {
|
||||
if (res.success) {
|
||||
this.$message.success(res.message)
|
||||
// 判断当前删除的数据是否是最后一页的最后一条数据，如果是的话页码减一
|
||||
if (this.ipagination.current > 1 && ((this.ipagination.current - 1) * this.ipagination.pageSize) + 1 === this.ipagination.total) {
|
||||
this.ipagination.current -= 1
|
||||
}
|
||||
this.loadData()
|
||||
} else {
|
||||
this.$message.warning(res.message)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
modalFormOk () {
|
||||
this.loadData()
|
||||
},
|
||||
searchReset () {
|
||||
this.queryParam = {}
|
||||
this.loadData(1)
|
||||
},
|
||||
searchQuery () {
|
||||
this.loadData(1)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 24px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.operate-btn {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
/*表格中换行文本的样式*/
|
||||
.table-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.table-operate-btn {
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.table-operate-btn:last-child {
|
||||
//color: red;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
margin: 5px 0 0 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div id="placeholder" class="nav" style="height: 100vh">
|
||||
<div id="iframeEditor"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'PreviewHistoryPage',
|
||||
data () {
|
||||
return {
|
||||
docEditor: null,
|
||||
documentUrl: window._CONFIG.documentUrl,
|
||||
currentFilePath: null // 当前页面展示文件的path
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
document.title = '预览'
|
||||
this.connectEditor()
|
||||
// 从主系统跳过来需要调这个方法，目前系统内跳不触发
|
||||
if (window.addEventListener) {
|
||||
window.addEventListener('load', this.connectEditor)
|
||||
window.addEventListener('resize', this.fixSize)
|
||||
} else if (window.attachEvent) {
|
||||
window.attachEvent('onload', this.connectEditor)
|
||||
window.attachEvent('onresize', this.fixSize)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
innerAlert (message) {
|
||||
if (console && console.log) console.log(message)
|
||||
},
|
||||
onAppReady () {
|
||||
console.log(123)
|
||||
this.innerAlert('Document editor ready')
|
||||
},
|
||||
onDocumentStateChange (event) {
|
||||
const title = document.title.replace(/\*$/g, '')
|
||||
document.title = title + (event.data ? '*' : '')
|
||||
// console.log('尝试获取dom')
|
||||
// console.log(document.getElementsByTagName('iframe'))
|
||||
// console.log(document.getElementsByTagName('iframe')[0])
|
||||
// console.log(document.getElementsByTagName('iframe')[0].contentDocument)
|
||||
// console.log(document.getElementsByTagName('iframe')[0].contentWindow)
|
||||
// console.log(document.getElementsByTagName('iframe')[0].contentWindow.document)
|
||||
// console.log(document.getElementsByTagName('iframe')[0].contentWindow.document.getElementById('id_main_view'))
|
||||
// console.log(document.getElementsByTagName('iframe')[0].contentDocument.getElementById('id_main_view'))
|
||||
},
|
||||
onRequestEditRights () {
|
||||
location.href = location.href.replace(RegExp('mode=view', 'i'), '')
|
||||
},
|
||||
onRequestHistory (event) {
|
||||
const historyObj =
|
||||
[
|
||||
{
|
||||
changes: null,
|
||||
key: this.$route.query.attId,
|
||||
version: 1,
|
||||
created: '2022-10-17 14:17:09',
|
||||
user: { id: this.$route.query.userId, name: this.$route.query.userName }
|
||||
}
|
||||
] || null
|
||||
|
||||
this.docEditor.refreshHistory({
|
||||
currentVersion: '1',
|
||||
history: historyObj
|
||||
})
|
||||
},
|
||||
onRequestHistoryData (data) {
|
||||
console.log(data)
|
||||
const version = data.data
|
||||
const historyData =
|
||||
[
|
||||
{
|
||||
'version': 1,
|
||||
'key': this.$route.query.attId,
|
||||
'url': this.documentUrl + this.$route.query.filePath + this.$route.query.fileName
|
||||
}
|
||||
] || null
|
||||
this.docEditor.setHistoryData(historyData[version - 1])
|
||||
},
|
||||
onRequestHistoryClose (event) {
|
||||
document.location.reload()
|
||||
},
|
||||
onError (event) {
|
||||
console.log(event)
|
||||
if (event) this.innerAlert(event.data)
|
||||
},
|
||||
onOutdatedVersion (event) {
|
||||
// console.log(event);
|
||||
location.reload(true)
|
||||
},
|
||||
replaceActionLink (href, linkParam) {
|
||||
let link
|
||||
const actionIndex = href.indexOf('&action=')
|
||||
// eslint-disable-next-line eqeqeq
|
||||
if (actionIndex != -1) {
|
||||
const endIndex = href.indexOf('&', actionIndex + '&action='.length)
|
||||
// eslint-disable-next-line eqeqeq
|
||||
if (endIndex != -1) {
|
||||
link = `${
|
||||
href.substring(0, actionIndex) + href.substring(endIndex)
|
||||
}&action=${encodeURIComponent(linkParam)}`
|
||||
} else {
|
||||
link = `${href.substring(0, actionIndex)}&action=${encodeURIComponent(
|
||||
linkParam
|
||||
)}`
|
||||
}
|
||||
} else {
|
||||
link = `${href}&action=${encodeURIComponent(linkParam)}`
|
||||
}
|
||||
return link
|
||||
},
|
||||
onMakeActionLink (event) {
|
||||
const actionData = event.data
|
||||
const linkParam = JSON.stringify(actionData)
|
||||
this.docEditor.setActionLink(this.replaceActionLink(location.href, linkParam))
|
||||
},
|
||||
fixSize () {
|
||||
const wrapEl = document.getElementsByClassName('form')
|
||||
if (wrapEl.length) {
|
||||
// eslint-disable-next-line no-restricted-globals
|
||||
wrapEl[0].style.height = `${screen.availHeight}px`
|
||||
window.scrollTo(0, -1)
|
||||
wrapEl[0].style.height = `${window.innerHeight}px`
|
||||
}
|
||||
},
|
||||
onDocumentSaved () {
|
||||
console.log(12)
|
||||
},
|
||||
connectEditor () {
|
||||
const fileInfo = JSON.parse(this.$route.query.fileInfo) || {}
|
||||
const nowTime = new Date().getTime()
|
||||
let url = ''
|
||||
let key = ''
|
||||
if (fileInfo.id) {
|
||||
url = this.documentUrl + fileInfo.filePath
|
||||
key = this.$route.query.key + nowTime
|
||||
this.currentFilePath = fileInfo.filePath
|
||||
} else {
|
||||
url = `${this.documentUrl}${this.$route.query.filePath}`
|
||||
key = this.$route.query.key + nowTime
|
||||
this.currentFilePath = this.$route.query.filePath
|
||||
}
|
||||
this.docEditor = new DocsAPI.DocEditor('iframeEditor', {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
type: 'desktop',
|
||||
documentType: 'word',
|
||||
token: 'secret',
|
||||
document: {
|
||||
title: this.$route.query.fileName,
|
||||
url: url,
|
||||
fileType: this.$route.query.fileType,
|
||||
key: key,
|
||||
permissions: {
|
||||
comment: false, // 定义是否可以注释文档。如果注释权限设置为true，则文档侧栏将包含“注释”菜单选项；只有将mode参数设置为edit时才生效，默认值与edit参数的值一致
|
||||
download: false, // 定义是否可以下载文档或仅在线查看或编辑文档。如果下载权限设置为“false”下载为菜单选项将没有。默认值为true
|
||||
edit: false, // 文件是否可以编辑，false时文件不可编辑
|
||||
fillForms: false, // 定义是否能在文档中填充表单
|
||||
modifyFilter: false, // 定义过滤器是否可以全局应用（true）影响所有其他用户，或局部应用（false），即仅适用于当前用户。如果将mode参数设置为edit，则过滤器修改仅对电子表格编辑器可用。默认值为true。
|
||||
modifyContentControl: false, // 定义是否可以更改内容控件设置。仅当mode参数设置为edit时，内容控件修改才可用于文档编辑器。默认值为true。
|
||||
review: false // 第一是否显示审阅文档菜单
|
||||
}
|
||||
},
|
||||
editorConfig: {
|
||||
actionLink: null,
|
||||
mode: 'view',
|
||||
lang: 'zh',
|
||||
user: {
|
||||
id: this.$route.query.userId,
|
||||
name: this.$route.query.userName
|
||||
}
|
||||
},
|
||||
events: {
|
||||
'onAppReady': this.onAppReady,
|
||||
'onDocumentStateChange': this.onDocumentStateChange, // 文档改变后的回调
|
||||
'onRequestEditRights': this.onRequestEditRights, // 用户尝试通过单击“编辑文档”按钮尝试将文档从视图切换到编辑模式时调用的函数。调用该函数时，必须在编辑模式下再次初始化编辑器。如果未声明该方法，则不会显示“编辑”按钮。
|
||||
'onError': this.onError,
|
||||
'onRequestHistory': this.onRequestHistory, // 用户尝试通过单击“版本历史记录”按钮显示文档版本历史记录时调用的函数。要显示文档版本历史，您必须调用refreshHistory方法。如果未声明该方法和onRequestHistoryData方法，则不会显示“版本历史记录”按钮。
|
||||
'onRequestHistoryData': this.onRequestHistoryData, // 用户尝试单击文档版本历史记录中的特定文档版本时调用的函数。
|
||||
'onRequestHistoryClose': this.onRequestHistoryClose, // 当用户尝试通过单击“关闭历史记录”按钮来查看文档版本历史记录时，试图调用该文档时调用的函数。调用该函数时，必须在编辑模式下再次初始化编辑器。如果未声明该方法，则不会显示“关闭历史记录”按钮。
|
||||
'onOutdatedVersion': this.onOutdatedVersion, // 使用旧的document.key值打开文档进行编辑时，显示错误后调用的函数，该值用于编辑先前的文档版本并已成功保存。调用此事件时，必须使用新的document.key重新初始化编辑器。
|
||||
'onMakeActionLink': this.onMakeActionLink,
|
||||
'onDocumentSaved': this.onDocumentSaved
|
||||
}
|
||||
})
|
||||
console.log(this.docEditor)
|
||||
// this.fixSize()
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (window.removeEventListener) {
|
||||
window.removeEventListener('load', this.connectEditor)
|
||||
window.removeEventListener('resize', this.fixSize)
|
||||
} else if (window.detachEvent) {
|
||||
window.detachEvent('onload', this.connectEditor)
|
||||
window.detachEvent('onresize', this.fixSize)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div id="placeholder" class="nav" style="height: 100vh">
|
||||
<div id="iframeEditor"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let docEditor
|
||||
const { location } = window
|
||||
|
||||
export default {
|
||||
name: 'PreviewPage',
|
||||
data () {
|
||||
return {
|
||||
docEditor: {},
|
||||
documentUrl: window._CONFIG.documentUrl,
|
||||
callbackUrl: window._CONFIG.callbackUrl
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
document.title = '预览'
|
||||
if (window.addEventListener) {
|
||||
this.connectEditor()
|
||||
window.addEventListener('resize', this.fixSize)
|
||||
} else if (window.attachEvent) {
|
||||
window.attachEvent('onload', this.connectEditor)
|
||||
window.attachEvent('onresize', this.fixSize)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
innerAlert (message) {
|
||||
if (console && console.log) console.log(message)
|
||||
},
|
||||
onAppReady () {
|
||||
this.innerAlert('Document editor ready')
|
||||
},
|
||||
onDocumentStateChange (event) {
|
||||
const title = document.title.replace(/\*$/g, '')
|
||||
document.title = title + (event.data ? '*' : '')
|
||||
},
|
||||
onRequestEditRights () {
|
||||
location.href = location.href.replace(RegExp('mode=view', 'i'), '')
|
||||
},
|
||||
onRequestHistory (event) {
|
||||
const historyObj =
|
||||
[
|
||||
{
|
||||
changes: null,
|
||||
key: this.$route.query.key,
|
||||
version: 1,
|
||||
created: '2022-10-17 14:17:09',
|
||||
user: { id: this.$route.query.userId, name: this.$route.query.userName }
|
||||
}
|
||||
] || null
|
||||
this.docEditor.refreshHistory({
|
||||
currentVersion: '1',
|
||||
history: historyObj
|
||||
})
|
||||
},
|
||||
onRequestHistoryData (data) {
|
||||
const version = data.data
|
||||
const historyData =
|
||||
[
|
||||
{
|
||||
'version': 1,
|
||||
'key': this.$route.query.key,
|
||||
'url': this.documentUrl + this.$route.query.filePath
|
||||
}
|
||||
] || null
|
||||
this.docEditor.setHistoryData(historyData[version - 1])
|
||||
},
|
||||
onRequestHistoryClose (event) {
|
||||
document.location.reload()
|
||||
},
|
||||
onError (event) {
|
||||
if (event) this.innerAlert(event.data)
|
||||
},
|
||||
onOutdatedVersion (event) {
|
||||
location.reload(true)
|
||||
},
|
||||
replaceActionLink (href, linkParam) {
|
||||
let link
|
||||
const actionIndex = href.indexOf('&action=')
|
||||
// eslint-disable-next-line eqeqeq
|
||||
if (actionIndex != -1) {
|
||||
const endIndex = href.indexOf('&', actionIndex + '&action='.length)
|
||||
// eslint-disable-next-line eqeqeq
|
||||
if (endIndex != -1) {
|
||||
link = `${
|
||||
href.substring(0, actionIndex) + href.substring(endIndex)
|
||||
}&action=${encodeURIComponent(linkParam)}`
|
||||
} else {
|
||||
link = `${href.substring(0, actionIndex)}&action=${encodeURIComponent(
|
||||
linkParam
|
||||
)}`
|
||||
}
|
||||
} else {
|
||||
link = `${href}&action=${encodeURIComponent(linkParam)}`
|
||||
}
|
||||
return link
|
||||
},
|
||||
onMakeActionLink (event) {
|
||||
const actionData = event.data
|
||||
const linkParam = JSON.stringify(actionData)
|
||||
this.docEditor.setActionLink(this.replaceActionLink(location.href, linkParam))
|
||||
},
|
||||
fixSize () {
|
||||
const wrapEl = document.getElementsByClassName('form')
|
||||
if (wrapEl.length) {
|
||||
// eslint-disable-next-line no-restricted-globals
|
||||
wrapEl[0].style.height = `${screen.availHeight}px`
|
||||
window.scrollTo(0, -1)
|
||||
wrapEl[0].style.height = `${window.innerHeight}px`
|
||||
}
|
||||
},
|
||||
connectEditor () {
|
||||
// console.log('connectEditor', 1233);
|
||||
// eslint-disable-next-line no-undef
|
||||
this.docEditor = new DocsAPI.DocEditor('iframeEditor', {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
type: 'desktop',
|
||||
documentType: 'text',
|
||||
token: '',
|
||||
document: {
|
||||
title: this.$route.query.fileName,
|
||||
url: `${this.documentUrl}${this.$route.query.filePath}`,
|
||||
fileType: this.$route.query.fileType,
|
||||
key: this.$route.query.key,
|
||||
permissions: {
|
||||
comment: false,
|
||||
download: true,
|
||||
edit: false,
|
||||
fillForms: true,
|
||||
modifyFilter: true,
|
||||
modifyContentControl: true,
|
||||
review: false
|
||||
}
|
||||
},
|
||||
editorConfig: {
|
||||
actionLink: null,
|
||||
mode: 'view',
|
||||
lang: 'zh',
|
||||
callbackUrl: '',
|
||||
user: {
|
||||
id: this.$route.query.userId,
|
||||
name: this.$route.query.userName
|
||||
}
|
||||
},
|
||||
events: {
|
||||
'onAppReady': this.onAppReady,
|
||||
'onDocumentStateChange': this.onDocumentStateChange,
|
||||
'onRequestEditRights': this.onRequestEditRights,
|
||||
'onError': this.onError,
|
||||
'onRequestHistory': this.onRequestHistory,
|
||||
'onRequestHistoryData': this.onRequestHistoryData,
|
||||
'onRequestHistoryClose': this.onRequestHistoryClose,
|
||||
'onOutdatedVersion': this.onOutdatedVersion,
|
||||
'onMakeActionLink': this.onMakeActionLink
|
||||
}
|
||||
})
|
||||
this.fixSize()
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (window.removeEventListener) {
|
||||
window.removeEventListener('load', this.connectEditor)
|
||||
window.removeEventListener('resize', this.fixSize)
|
||||
} else if (window.detachEvent) {
|
||||
window.detachEvent('onload', this.connectEditor)
|
||||
window.detachEvent('onresize', this.fixSize)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<a-modal
|
||||
:title="title"
|
||||
:visible="visible"
|
||||
:confirm-loading="confirmLoading"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel">
|
||||
<a-spin :spinning="confirmLoading">
|
||||
<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
|
||||
<a-form-item label="文档名称">
|
||||
<a-input v-decorator="['model', validatorRules.model]" :maxLength="50" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { addFile } from '../../api/fileApi.js'
|
||||
|
||||
export default {
|
||||
name: 'AddFileModal',
|
||||
data () {
|
||||
return {
|
||||
title: '新增',
|
||||
visible: false,
|
||||
confirmLoading: false,
|
||||
form: this.$form.createForm(this),
|
||||
validatorRules: {
|
||||
model: {
|
||||
rules: [{ required: true, message: '请输入文档名称' }],
|
||||
validateTrigger: 'blur'
|
||||
}
|
||||
},
|
||||
model: {}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
add () {
|
||||
this.visible = true
|
||||
},
|
||||
handleOk () {
|
||||
this.form.validateFields((errors, values) => {
|
||||
if (!errors) {
|
||||
const formData = Object.assign(this.model, values)
|
||||
this.confirmLoading = true
|
||||
addFile(formData).then(res => {
|
||||
if (res.success) {
|
||||
const data = res.result || {}
|
||||
this.$message.success(res.message)
|
||||
this.$emit('ok')
|
||||
this.close()
|
||||
const { href } = this.$router.resolve({
|
||||
path: '/editorPage',
|
||||
query: {
|
||||
filePath: data.editFilePath,
|
||||
fileName: data.fileName,
|
||||
fileType: 'docx',
|
||||
fileId: data.id,
|
||||
key: data.id
|
||||
}
|
||||
})
|
||||
window.open(href, '_blank')
|
||||
} else {
|
||||
this.$message.warn(res.message)
|
||||
}
|
||||
}).finally(() => {
|
||||
this.confirmLoading = false
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
handleCancel () {
|
||||
this.close()
|
||||
},
|
||||
close () {
|
||||
this.visible = false
|
||||
this.form.resetFields()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,40 @@
|
||||
module.exports = {
|
||||
// publicPath: process.env.NODE_ENV === 'production' ? '/onlyofficeui/' : '/',
|
||||
publicPath: '/',
|
||||
outputDir:"onlyofficeui", //设置打包后的项目目录名称
|
||||
css: {
|
||||
loaderOptions: {
|
||||
less: {
|
||||
// 自定义主题样式
|
||||
// modifyVars: {
|
||||
// 'primary-color': '#41B883',
|
||||
// 'link-color': '#41B883',
|
||||
// 'border-radius-base': '2px'
|
||||
// }
|
||||
// 解决问题主要需要打开这个
|
||||
javascriptEnabled: true
|
||||
}
|
||||
}
|
||||
},
|
||||
devServer: {
|
||||
port: 8093,
|
||||
proxy: {
|
||||
/* '/api': {
|
||||
target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', //mock API接口系统
|
||||
ws: false,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
'/laws-chery': '' //默认所有请求都加了jero-boot前缀，需要去掉
|
||||
}
|
||||
}, */
|
||||
'/laws-chery': {
|
||||
target: 'http://localhost:8188',
|
||||
ws: false,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
// '/laws-chery': '' // 默认所有请求都加了jero-boot前缀，需要去掉
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user