ZQ/onlyoffice-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add 列表

Browse Source
This commit is contained in:
赵霄
2023-09-14 18:04:58 +08:00
parent 13af715642
commit 5239d48bce
13 changed files with 462 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
babel.config.js
+10 -2
View File
@@ -1,5 +1,13 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset',
'@vue/cli-plugin-babel/preset'
],
};
plugins: [
[
'import',
{
libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true
}
]
]
}
package.json
+5 -2
View File
@@ -8,7 +8,12 @@
"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",
"less": "3.9.0",
"less-loader": "4.1.0",
"vue": "^2.6.11",
"vue-router": "^3.2.0"
},
@@ -17,8 +22,6 @@
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"eslint-plugin-import": "^2.20.2",
"less": "^3.0.4",
"less-loader": "^5.0.0",
"vue-template-compiler": "^2.6.11"
},
"browserslist": [
public/index.html
+18 -6
View File
@@ -7,15 +7,25 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- onlyOffice服务器地址-->
<!-- <script type="text/javascript" src="http://onlyoffice.sinotruk.com/web-apps/apps/api/documents/api.js"></script>-->
<% if (process.env.NODE_ENV === 'development' ) { %>
<script type="text/javascript" src="http://10.10.10.45:80/web-apps/apps/api/documents/api.js"></script>
<!--<script type="text/javascript" src="http://onlyoffice.sinotruk.com/web-apps/apps/api/documents/api.js"></script>-->
<% } %>
<% if (process.env.NODE_ENV === 'production' ) { %>
<!--<script type="text/javascript" src="http://10.10.10.45:80/web-apps/apps/api/documents/api.js"></script>-->
<script type="text/javascript" src="http://onlyoffice.sinotruk.com/web-apps/apps/api/documents/api.js"></script>
<% } %>
<!-- 全局配置 -->
<% if (process.env.NODE_ENV === 'development' ) { %>
<script>
window._CONFIG = {
'documentUrl': 'http://39.98.140.126:18888/file/model/task_9ad64b01/task_9ad64b01_top_9ad64b01_node.docx',
// 'callbackUrl': 'http://39.98.140.126:17211/',
'configUrl': 'http://localhost:8082/'
// 'documentUrl': 'http://onlyofficevue.sinotruk.com/DOCX.docx',
// 'documentUrl': 'http://39.98.140.126:18888/file/model/task_9ad64b01/task_9ad64b01_top_9ad64b01_node.docx',
'documentUrl': 'http://10.0.1.28:8184/laws-sinotruk/onlyoffice/downLoadFile?path=',
'callbackUrl': 'http://10.0.1.28:8184/',
// 'configUrl': 'http://onlyofficeplugins.sinotruk.com/'
// 'configUrl': 'http://10.10.10.45:809/'
'configUrl': 'http://10.0.1.28:8081/'
}
</script>
<% } %>
@@ -23,8 +33,10 @@
<script>
window._CONFIG = {
'documentUrl': 'http://onlyofficevue.sinotruk.com/DOCX.docx',
// 'callbackUrl': 'https://srms.foton.com.cn',
'configUrl': 'http://onlyoffice.sinotruk.com/'
// 'documentUrl': 'http://39.98.140.126:18888/file/model/task_9ad64b01/task_9ad64b01_top_9ad64b01_node.docx',
'callbackUrl': 'https://srms.foton.com.cn',
'configUrl': 'http://onlyofficeplugins.sinotruk.com/'
// 'configUrl': 'http://10.10.10.45:809/'
}
</script>
<% } %>
src/App.vue
+23 -7
View File
@@ -1,13 +1,27 @@
<template>
<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 :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
}
}
}
</script>
<style lang="less">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -16,10 +30,12 @@
text-align: center;
color: #2c3e50;
}
* {
margin: 0;
padding: 0;
}
#nav {
padding: 30px;
src/api/fileApi.js
+9
View File
@@ -0,0 +1,9 @@
import { getAction, postAction } from './manage.js'
const addFile = (params) => getAction('/onlyoffice/saveEditFile', params)
const getList = (params) => getAction('/onlyoffice/pageList', params)
export {
addFile,
getList
}
src/api/manage.js
+17
View File
@@ -0,0 +1,17 @@
import { axios } from '../utils/request.js'
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
})
}
src/main.js
+20 -6
View File
@@ -1,10 +1,24 @@
import Vue from 'vue';
import App from './App.vue';
import router from './router';
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.config.productionTip = false;
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.config.productionTip = false
new Vue({
router,
render: (h) => h(App),
}).$mount('#app');
render: (h) => h(App)
}).$mount('#app')
src/router/index.js
+19 -11
View File
@@ -1,13 +1,21 @@
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter);
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
redirect: '/editor',
redirect: '/List'
},
{
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: '/onlyoffice',
@@ -15,7 +23,7 @@ const routes = [
// 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(/* webpackChunkName: "onlyoffice" */ '../views/Onlyoffice.vue'),
component: () => import('../views/Onlyoffice.vue')
},
{
path: '/editor',
@@ -23,14 +31,14 @@ const routes = [
// 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(/* webpackChunkName: "onlyoffice" */ '../views/editor.vue'),
},
];
component: () => import('../views/editor.vue')
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes,
});
routes
})
export default router;
export default router
src/utils/request.js
+17
View File
@@ -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 }
src/views/List.vue
+173
View File
@@ -0,0 +1,173 @@
<template>
<div class="page">
<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 } 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' }
},
// 操作
{
title: '操作',
fixed: 'right',
width: 200,
align: 'center',
scopedSlots: { customRender: 'operation' }
}
],
dataSource: [],
url: {
list: '/onlyoffice/pageList'
}
}
},
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'
}
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) {
this.$router.push({
path: '/editor',
query: {
filePath: record.editFilePath,
fileName: record.fileName,
fileType: 'docx',
key: record.id
}
})
},
handleDelete (id) {
console.log(id)
},
modalFormOk () {
this.loadData()
}
}
}
</script>
<style scoped>
.page {
padding: 24px;
text-align: left;
}
.operate-btn {
margin-bottom: 20px;
}
/*表格中换行文本的样式*/
.table-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.table-operate-btn {
margin: 0 8px;
}
.table-operate-btn:last-child {
color: red;
}
</style>
src/views/editor.vue
+28 -19
View File
@@ -19,6 +19,8 @@ export default {
}
},
mounted () {
this.connectEditor()
// 从主系统跳过来需要调这个方法，目前系统内跳不触发
if (window.addEventListener) {
window.addEventListener('load', this.connectEditor)
window.addEventListener('resize', this.fixSize)
@@ -32,12 +34,20 @@ export default {
if (console && console.log) console.log(message)
},
onAppReady () {
console.log(123);
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'), '')
@@ -60,7 +70,7 @@ export default {
})
},
onRequestHistoryData (data) {
console.log(data);
console.log(data)
const version = data.data
const historyData =
[
@@ -76,7 +86,7 @@ export default {
document.location.reload()
},
onError (event) {
console.log(event);
console.log(event)
if (event) this.innerAlert(event.data)
},
onOutdatedVersion (event) {
@@ -122,7 +132,8 @@ export default {
console.log(12)
},
connectEditor () {
console.log(this.documentUrl)
console.log(`${this.documentUrl}${this.$route.query.filePath}`)
console.log(window._CONFIG.configUrl + 'page1/config.json')
const nowTime = new Date().getTime()
this.docEditor = new DocsAPI.DocEditor('iframeEditor', {
width: '100%',
@@ -135,10 +146,8 @@ export default {
documentType: 'word',
token: 'secret',
document: {
// title: this.$route.query.oldFileName + '.' + this.$route.query.fileType,
title: '文档.docx',
// url: this.documentUrl + this.$route.query.filePath + this.$route.query.fileName,
url: this.documentUrl,
title: this.$route.query.fileName,
url: `${this.documentUrl}${this.$route.query.filePath}`,
fileType: this.$route.query.fileType,
key: this.$route.query.key,
info: {
@@ -153,16 +162,16 @@ export default {
modifyFilter: true, // 定义过滤器是否可以全局应用（true）影响所有其他用户，或局部应用（false），即仅适用于当前用户。如果将mode参数设置为edit，则过滤器修改仅对电子表格编辑器可用。默认值为true。
modifyContentControl: true, // 定义是否可以更改内容控件设置。仅当mode参数设置为edit时，内容控件修改才可用于文档编辑器。默认值为true。
review: true, // 第一是否显示审阅文档菜单
"commentGroups": {
"edit": ["Group2", ""],
"remove": [""],
"view": ""
'commentGroups': {
'edit': ['Group2', ''],
'remove': [''],
'view': ''
},
"copy": true,
"deleteCommentAuthorOnly": false,
"editCommentAuthorOnly": false,
"print": true,
"reviewGroups": ["Group1", "Group2", ""]
'copy': true,
'deleteCommentAuthorOnly': false,
'editCommentAuthorOnly': false,
'print': true,
'reviewGroups': ['Group1', 'Group2', '']
}
},
editorConfig: {
@@ -172,7 +181,7 @@ export default {
query: {
id: 123456
},
callbackUrl: `${this.callbackUrl}/bat-wkflow/busProcessModel/recieveFile?fileNm=${this.$route.query.fileName}&key=${this.$route.query.key}&standNo=${this.$route.query.filePath}&fileId=${this.$route.query.attId}&standName=${this.$route.query.standName}&standEnName=${this.$route.query.standEnName}&standCode=${this.$route.query.standCode}&putTime=${this.$route.query.putTime}&issueTime=${this.$route.query.issueTime}&dtqbbhbuss=${this.$route.query.dtqbbhbuss}`,
callbackUrl: `${this.callbackUrl}laws-sinotruk/onlyoffice/recieveFile?fileId=${this.$route.query.key}&fileNm=${this.$route.query.fileName}&key=${this.$route.query.key}`,
user: {
id: this.$route.query.userId,
name: this.$route.query.userName
@@ -181,7 +190,7 @@ export default {
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.$route.query.fileName, // 定义允许其他用户共享此文档的绝对URL。
// shareUrl: this.documentUrl + this.$route.query.filePath + this.fileName, // 定义允许其他用户共享此文档的绝对URL。
saveUrl: this.documentUrl, // 定义允许将文档保存到用户个人计算机上的绝对URL。
embedUrl: this.documentUrl, // 定义文档的绝对URL，以作为嵌入到网页中的文档的源文件
shareUrl: this.documentUrl, // 定义允许其他用户共享此文档的绝对URL。
src/views/modules/AddFileModal.vue
+86
View File
@@ -0,0 +1,86 @@
<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()
this.$router.push({
path: '/editor',
query: {
filePath: data.editFilePath,
fileName: data.fileName,
fileType: 'docx',
key: data.id
}
})
} else {
this.$message.warn(res.message)
}
}).finally(() => {
this.confirmLoading = false
})
}
})
},
handleCancel () {
this.close()
},
close () {
this.visible = false
this.form.resetFields()
}
}
}
</script>
<style scoped>
</style>
vue.config.js
+37
View File
@@ -0,0 +1,37 @@
module.exports = {
css: {
loaderOptions: {
less: {
// 自定义主题样式
// modifyVars: {
// 'primary-color': '#41B883',
// 'link-color': '#41B883',
// 'border-radius-base': '2px'
// }
// 解决问题主要需要打开这个
javascriptEnabled: true
}
}
},
devServer: {
port: 8080,
proxy: {
/* '/api': {
target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro', //mock API接口系统
ws: false,
changeOrigin: true,
pathRewrite: {
'/laws-sinotruk': '' //默认所有请求都加了jero-boot前缀，需要去掉
}
}, */
'/laws-sinotruk': {
target: 'http://localhost:8184',
ws: false,
changeOrigin: true,
pathRewrite: {
// '/laws-sinotruk': '' // 默认所有请求都加了jero-boot前缀，需要去掉
}
}
}
},
}