Skip to content

9
91isoft_web_vue
Commit c8ec2a52 authored by 张伯涛's avatar 张伯涛
Browse files
Options

在线文档

parent 59636015
Hide whitespace changes
Inline Side-by-side
Showing with 300 additions and 101 deletions
.env.development
View file @ c8ec2a52
...@@ -4,7 +4,13 @@ ENV = 'development' ...@@ -4,7 +4,13 @@ ENV = 'development'
# base api # base api
VUE_APP_BASE_API = '/dev-api' VUE_APP_BASE_API = '/dev-api'
VUE_CLI_BABEL_TRANSPILE_MODULES = true VUE_CLI_BABEL_TRANSPILE_MODULES = true
# index.html文件引用的
ONLYOFFICE_WEB = 'http://192.168.1.27:30082'
VUE_APP_BASE_WEB = 'http://192.168.1.27:30082'
VUE_APP_BASE_APIWEB = 'http://192.168.1.27:30082'
# 文件获取地址
ONLYOFFICE_GETFILE = 'http://192.168.1.71:8082'
# 编辑word后保存时回调的地址
ONLYOFFICE_CALLBACK = 'http://192.168.1.71:8082'
.env.test
View file @ c8ec2a52
...@@ -3,4 +3,11 @@ ENV = 'production' ...@@ -3,4 +3,11 @@ ENV = 'production'
# 测试环境 # 测试环境
# base api # base api
VUE_APP_BASE_API = 'http://192.144.239.97:20075/' VUE_APP_BASE_API = 'http://49.232.167.247:20014/'
# index.html文件引用的
ONLYOFFICE_WEB = 'http://49.232.167.247:20016'
# 文件获取地址
ONLYOFFICE_GETFILE = 'http://172.21.0.10:20014'
# 编辑word后保存时回调的地址
ONLYOFFICE_CALLBACK = 'http://172.21.0.10:20014'
package.json
View file @ c8ec2a52
...@@ -14,6 +14,7 @@ ...@@ -14,6 +14,7 @@
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml" "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml"
}, },
"dependencies": { "dependencies": {
"@onlyoffice/document-editor-vue": "^1.4.0",
"@riophae/vue-treeselect": "^0.4.0", "@riophae/vue-treeselect": "^0.4.0",
"axios": "0.18.1", "axios": "0.18.1",
"bpmn-js": "^6.1.1", "bpmn-js": "^6.1.1",
......
public/index.html
View file @ c8ec2a52
...@@ -5,6 +5,7 @@ ...@@ -5,6 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>liulanqi_logo.png"> <link rel="icon" href="<%= BASE_URL %>liulanqi_logo.png">
<script type="text/javascript" src="http://49.232.167.247:20016/web-apps/apps/api/documents/api.js"></script>
<!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_2011217_f70ptj9y4oc.css">--> <!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_2011217_f70ptj9y4oc.css">-->
<title><%= webpackConfig.name %></title> <title><%= webpackConfig.name %></title>
</head> </head>
......
src/api/system/ossInfo.js
View file @ c8ec2a52
...@@ -66,3 +66,18 @@ export function exportOssInfo(query) { ...@@ -66,3 +66,18 @@ export function exportOssInfo(query) {
responseType: 'blob' responseType: 'blob'
}) })
} }
// 7. 上传
export function uploadPublic(data) {
return request({
url: 'common/fileUpload',
method: 'post',
data
})
}
// 8.通过id查询数据详情
export function ossinfoDetail(id) {
return request({
url: '/ossinfo/detail/' + id,
method: 'get'
})
}
src/components/Pagination/index.vue
View file @ c8ec2a52
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
:page-size.sync="pageSize" :page-size.sync="pageSize"
:layout="layout" :layout="layout"
:page-sizes="rows" :page-sizes="rows"
:total="total" :total="Number(total)"
v-bind="$attrs" v-bind="$attrs"
@size-change="handleSizeChange" @size-change="handleSizeChange"
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
......
src/components/vanOnkyOffice/index.vue 0 → 100644
View file @ c8ec2a52
<template>
<div id="vabOnlyOffice" />
</template>
<script>
import { getFileType } from '@/utils/wayne'
export default {
name: 'VabOnlyOffice',
props: {
option: {
type: Object,
default: () => {
return {}
}
}
},
data() {
return {
doctype: ''
}
},
watch: {
option: {
handler: function(n) {
this.setEditor(n)
this.doctype = getFileType(n.fileType)
},
deep: true
}
},
mounted() {
// console.log('process.env.VUE_APP_BASE_API_ONLYOFFICE_WEB', process.env.VUE_APP_BASE_WEB)
// console.log('process.env.VUE_APP_BASE_API_WEB', process.env.VUE_APP_BASE_APIWEB)
// console.log('VUE_APP_BASE_API', process.env.VUE_APP_BASE_API)
if (this.option) {
this.setEditor(this.option)
}
},
methods: {
async setEditor(option) {
console.log('option', option)
this.doctype = getFileType(option.fileType)
const config = {
document: {
// 文件扩展名
fileType: option.fileType,
// key 默认置空则不走缓存 always update
key: option.key,
title: option.title,
url: 'http://172.21.0.10:20014/office/getFile?key=' + option.key,
permissions: {
comment: true,
copy: true, // 定义内容是否可以复制到剪贴板。如果该参数设置为false，则只能在当前文档编辑器中粘贴内容。默认值为true。
download: true, // 定义文档是可以下载还是只能在线查看或编辑。如果下载权限设置为“假”的下载为...菜单选项将是缺席的文件菜单。默认值为true。
edit: option.isEdit, // 定义文档是可以编辑还是只能查看。如果编辑权限设置为“true”，则文件菜单将包含编辑文档菜单选项；请注意，如果编辑权限设置为“false”，文档将在查看器中打开，即使模式参数设置为edit，您也无法将其切换到编辑器。默认值为true。
print: true, // 定义是否可以打印文档。如果打印权限设置为“false”的打印菜单选项将是缺席的文件菜单。默认值为true
fillForms: true,
modifyFilter: true,
modifyContentControl: true,
review: true,
commentGroups: {}
}
},
documentType: this.doctype,
// documentType: 'word',
editorConfig: {
mode: 'edit',
callbackUrl: 'http://172.21.0.10:20014/office/callback', // "编辑word后保存时回调的地址，这个api需要自己写了，将编辑后的文件通过这个api保存到自己想要的位置
lang: 'zh-CN', // 语言设置
// 定制
customization: {
autosave: true, // 是否自动保存
chat: false,
comments: false,
help: false,
// "hideRightMenu": false,//定义在第一次加载时是显示还是隐藏右侧菜单。 默认值为false
// 是否显示插件
plugins: true
// 暂时无法生效
// customer: {
// address: '12333333333',
// info: 'S11',
// logo: '123',
// mail: 'j123',
// name: '123',
// www: '123'
// }
}
},
width: '100%',
height: '100%'
}
// eslint-disable-next-line no-undef,no-unused-vars
new DocsAPI.DocEditor('vabOnlyOffice', config)
}
}
}
</script>
src/router/index.js
View file @ c8ec2a52
...@@ -81,6 +81,11 @@ export const constantRoutes = [ ...@@ -81,6 +81,11 @@ export const constantRoutes = [
meta: { title: '修改密码', icon: 'dashboard' } meta: { title: '修改密码', icon: 'dashboard' }
}] }]
}, },
{
path: '/onlyOffice',
component: (resolve) => require(['@/views/onlyOffice.vue'], resolve),
hidden: true
},
/* { /* {
path: '/', path: '/',
component: Layout, component: Layout,
......
src/utils/wayne.js 0 → 100644
View file @ c8ec2a52
export function 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
}
src/views/onlyOffice.vue 0 → 100644
View file @ c8ec2a52
<template>
<div class="qualityManual-container">
<div class="qualityManual-container-office">
<vab-only-office :option="option" />
</div>
</div>
</template>
<script>
import vabOnlyOffice from '../components/vanOnkyOffice/index.vue'
export default {
name: 'OnlyOffice',
components: {
vabOnlyOffice
},
data() {
return {
// 参考vabOnlyOffice组件参数配置
option: {
url: '',
isEdit: '',
fileType: '',
title: '',
lang: '',
isPrint: ''
}
}
},
created() {
this.getFile()
},
mounted() {
},
methods: {
getFile() {
console.log('2222', typeof this.$route.query.isEdit)
this.option.isEdit = this.$route.query.isEdit === '1'
// this.option.title = this.$route.query.title
this.option.title = 'title'
this.option.key = this.$route.query.key
// this.option.lang = 'zh-CN'
// this.option.url = 'http://192.168.1.27:8888/getFile'
this.option.fileType = this.$route.query.fileType
// this.option.isPrint = false;
console.log('this.option', this.option)
}
}
}
</script>
<style scoped lang="scss">
.qualityManual-container {
padding: 0 !important;
&-office {
width: 100%;
height: 100vh;
}
}
</style>
src/views/system/ossInfo/index.vue
View file @ c8ec2a52
...@@ -88,6 +88,16 @@ ...@@ -88,6 +88,16 @@
{{ scope.row.bucket || '-' }} {{ scope.row.bucket || '-' }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="id" width="100" prop="businessId" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{ scope.row.businessId || '-' }}
</template>
</el-table-column>
<el-table-column label="key" width="100" prop="docKey" :show-overflow-tooltip="true">
<template slot-scope="scope">
{{ scope.row.docKey || '-' }}
</template>
</el-table-column>
<el-table-column label="originalName" prop="originalName" :show-overflow-tooltip="true"> <el-table-column label="originalName" prop="originalName" :show-overflow-tooltip="true">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.originalName || '-' }} {{ scope.row.originalName || '-' }}
...@@ -109,15 +119,21 @@ ...@@ -109,15 +119,21 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" class-name="small-padding fixed-width" min-width="50px"> <el-table-column label="操作" class-name="small-padding fixed-width" min-width="90px">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
v-if="scope.row.fileType === 'xls' || scope.row.fileType === 'xlsx' ||
scope.row.fileType === 'doc' || scope.row.fileType === 'docx' ||
scope.row.fileType === 'ppt' || scope.row.fileType === 'pptx'"
:class="commonField.updateClass" :class="commonField.updateClass"
:type="commonField.typeParent" :type="commonField.typeParent"
:size="commonField.size" :size="commonField.size"
@click="handleUpdate(scope.row)" @click="handleUpdate(scope.row)"
>修改</el-button> >修改</el-button>
<el-button <el-button
v-if="scope.row.fileType === 'xls' || scope.row.fileType === 'xlsx' ||
scope.row.fileType === 'doc' || scope.row.fileType === 'docx' ||
scope.row.fileType === 'pdf' || scope.row.fileType === 'ppt'"
style="color: #1890ff" style="color: #1890ff"
:type="commonField.typeParent" :type="commonField.typeParent"
:size="commonField.size" :size="commonField.size"
...@@ -141,83 +157,22 @@ ...@@ -141,83 +157,22 @@
@pagination="getList" @pagination="getList"
/> />
<!-- 添加或修改配置对话框 --> <!-- 添加或修改配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="80%" append-to-body :close-on-click-modal="false" @close="cancel"> <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :close-on-click-modal="false" @close="cancel">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px"> <el-form ref="form" :model="form" :rules="rules" size="small" label-width="120px">
<el-row :gutter="20"> <el-form-item label="图片:" prop="url">
<el-col :span="12"> <el-upload
<el-form-item label="bucket" prop="bucket"> action="#"
<el-input v-if="!isView" v-model.trim="form.bucket" show-word-limit :maxlength="50" placeholder="请输入bucket" /> :file-list="fileList"
<span v-if="isView">{{form.bucket || '-'}}</span> drag
</el-form-item> :http-request="handleUpload"
</el-col> :on-success="handleAvatarSuccess"
<el-col :span="12"> >
<el-form-item label="path" prop="path"> <i class="el-icon-upload" />
<el-input v-if="!isView" v-model.trim="form.path" show-word-limit :maxlength="255" placeholder="请输入path" /> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
<span v-if="isView">{{form.path || '-'}}</span> <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
</el-form-item> </el-upload>
</el-col> </el-form-item>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="ossKey" prop="ossKey">
<el-input v-if="!isView" v-model.trim="form.ossKey" show-word-limit :maxlength="200" placeholder="请输入ossKey" />
<span v-if="isView">{{form.ossKey || '-'}}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="md5" prop="md5">
<el-input v-if="!isView" v-model.trim="form.md5" show-word-limit :maxlength="255" placeholder="请输入md5" />
<span v-if="isView">{{form.md5 || '-'}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="etag" prop="eTag">
<el-input v-if="!isView" v-model.trim="form.eTag" show-word-limit :maxlength="50" placeholder="请输入etag" />
<span v-if="isView">{{form.eTag || '-'}}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="url" prop="url">
<el-input v-if="!isView" v-model.trim="form.url" show-word-limit :maxlength="200" placeholder="请输入url" />
<span v-if="isView">{{form.url || '-'}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="fileSize" prop="fileSize">
<el-input-number v-if="!isView" v-model.trim="form.fileSize" style="width: 100%" placeholder="请输入fileSize" controls-position="right" :min="0" />
<span v-if="isView">{{form.fileSize || '-'}}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="fileType" prop="fileType">
<el-input v-if="!isView" v-model.trim="form.fileType" show-word-limit :maxlength="10" placeholder="请输入fileType" />
<span v-if="isView">{{form.fileType || '-'}}</span>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="originalName" prop="originalName">
<el-input v-if="!isView" v-model.trim="form.originalName" show-word-limit :maxlength="200" placeholder="请输入originalName" />
<span v-if="isView">{{form.originalName || '-'}}</span>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="toPdfUrl" prop="toPdfUrl">
<el-input v-if="!isView" v-model.trim="form.toPdfUrl" show-word-limit :maxlength="200" placeholder="请输入toPdfUrl" />
<span v-if="isView">{{form.toPdfUrl || '-'}}</span>
</el-form-item>
</el-col>
</el-row>
</el-form> </el-form>
<div slot="footer" class="dialog-footer">
<el-button class="cancelBtn" @click="cancel">取 消</el-button>
<el-button class="submitBtn" type="primary" @click="submitForm">确 定</el-button>
</div>
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
...@@ -229,12 +184,15 @@ import { ...@@ -229,12 +184,15 @@ import {
delOssInfo, delOssInfo,
addOssInfo, addOssInfo,
updateOssInfo, updateOssInfo,
exportOssInfo } from '@/api/system/ossInfo' exportOssInfo,
uploadPublic, ossinfoDetail
} from '@/api/system/ossInfo'
import commonField from '@/utils/commonField' import commonField from '@/utils/commonField'
export default { export default {
name: 'OssInfo', name: 'OssInfo',
data() { data() {
return { return {
fileList: [],
isView: false, isView: false,
// 遮罩层 // 遮罩层
loading: true, loading: true,
...@@ -283,15 +241,46 @@ export default { ...@@ -283,15 +241,46 @@ export default {
this.getList() // 列表查询 this.getList() // 列表查询
}, },
methods: { methods: {
// 查看 /** 上传接口*/
handleUpload(file) {
console.log('file', file)
const formData = new FormData()
formData.append('file', file.file)
formData.append('temp', 'ossInfo')
uploadPublic(formData).then(res => {
if (res.code === 200) {
this.$message({
type: 'success',
message: '上传成功'
})
this.open = false
this.getList() // 列表查询
}
})
},
/** 上传成功回调*/
handleAvatarSuccess(res, file) {
console.log('res', res)
},
/** 修改按钮操作 */
handleUpdate(row) {
ossinfoDetail(row.businessId).then(res => {
if (res.code === 200) {
const form = res.data
// isEdit (0: 不可编辑，1：可以编辑)
window.open('#/onlyOffice?isEdit=1' + '&title=' + form.originalName + '&fileType=' + form.fileType + '&key=' + form.docKey, '_blank')
// window.open('#/onlyOffice', '_blank')
}
})
},
/** 查看按钮操作 */
handleView(row) { handleView(row) {
this.reset() ossinfoDetail(row.businessId).then(res => {
const id = row.businessId if (res.code === 200) {
getOssInfo(id).then(response => { const form = res.data
this.form = response.data // isEdit (0: 不可编辑，1：可以编辑)
this.isView = true window.open('#/onlyOffice?isEdit=0' + '&title=' + form.originalName + '&fileType=' + form.fileType + '&key=' + form.docKey, '_blank')
this.open = true }
this.title = '查看'
}) })
}, },
/** 查询列表 */ /** 查询列表 */
...@@ -352,19 +341,9 @@ export default { ...@@ -352,19 +341,9 @@ export default {
this.reset() this.reset()
this.isView = false this.isView = false
this.open = true this.open = true
this.fileList = []
this.title = '添加' this.title = '添加'
}, },
/** 修改按钮操作 */
handleUpdate(row) {
this.reset()
const id = row.businessId
getOssInfo(id).then(response => {
this.form = response.data
this.isView = false
this.open = true
this.title = '修改'
})
},
// 改变状态 // 改变状态
handleStatusChange(row) { handleStatusChange(row) {
const text = row.flag === '1' ? '启用' : '停用' const text = row.flag === '1' ? '启用' : '停用'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment