SH-Arbitrate/Mediation-Frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

onlyoffice在线编辑

Browse Source
This commit is contained in:
hanchaobo
2024-03-18 17:53:14 +08:00
parent b1810b835a
commit 9948c9ed04
12 changed files with 1371 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/api.js
+1118
View File
File diff suppressed because it is too large Load Diff
public/index.html
+1
View File
@@ -7,6 +7,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title>
<script src="http://121.40.189.20:8899/web-apps/apps/api/documents/api.js"></script>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<style>
html,
src/api/caseManagement/caseManagement.js
+7
View File
@@ -239,3 +239,10 @@ export function secretaryRoleByUserId(query) {
params: query
})
}
// 获取证件类型
export function getIdType() {
return request({
url: '/system/dict/data/type/id_type',
method: 'get',
})
}
src/api/login.js
+7
View File
@@ -84,3 +84,10 @@ export function verifyUserName(data) {
params:data
})
}
// 获取证件类型
export function getIdType() {
return request({
url: '/system/dict/data/type/skipToken/id_type',
method: 'get',
})
}
src/api/onlyoffice/onlyoffice.js
+20
View File
@@ -0,0 +1,20 @@
import request from '@/utils/request'
// 获取onlyoffice配置文件
export function getOnlyoffice(params) {
return request({
url: '/onlyOffice',
// headers: {
// isToken: false
// },
method: 'get',
params: params
})
}
// 保存onlyoffice文档
export function saveOnlyOfficeFile(data) {
return request({
url: '/caseApplication/saveOnlyOfficeFile',
method: 'post',
data: data
})
}
src/router/index.js
+5
View File
@@ -61,6 +61,11 @@ export const constantRoutes = [
component: () => import('@/views/error/401'),
hidden: true
},
{
path: '/onlyoffice',
component: () => import('@/views/onlyoffice/onlyoffice'),
hidden: true
},
{
path: '',
component: Layout,
src/store/getters.js
+1
View File
@@ -15,5 +15,6 @@ const getters = {
topbarRouters:state => state.permission.topbarRouters,
defaultRoutes:state => state.permission.defaultRoutes,
sidebarRouters:state => state.permission.sidebarRouters,
userId:state => state.user.userId,
}
export default getters
src/store/modules/user.js
+5
View File
@@ -6,11 +6,15 @@ const user = {
token: getToken(),
name: '',
avatar: '',
userId:null,
roles: [],
permissions: []
},
mutations: {
SET_USERID:(state,userId) => {
state.userId = userId
},
SET_TOKEN: (state, token) => {
state.token = token
},
@@ -60,6 +64,7 @@ const user = {
}
commit('SET_NAME', user.userName)
commit('SET_AVATAR', avatar)
commit('SET_USERID',user.userId)
resolve(res)
}).catch(error => {
reject(error)
src/views/caseManagement/components/addCase.vue
+72 -69
View File
@@ -118,7 +118,7 @@
<el-col :span="24" v-if="modelFlag && showmediate">
<el-form-item label="调解书:">
<div v-for="(item, index) in formData.caseAttachList" :key="index" v-if="item.annexType == 7">
<div style="color: blue; cursor: pointer" @click="fileDetil(item.annexPath)">
<div style="color: blue; cursor: pointer" @click="fileDetil(item.onlyOfficeFileId)">
{{ item.annexName }}
</div>
</div>
@@ -205,30 +205,24 @@
]">
<el-select v-model="formData.affiliate.idType" placeholder="证件类型" auto-complete="off" style="width: 100%;"
disabled>
<el-option v-for="item in idTypeList" :key="item.id" :label="item.value" :value="item.id">
<el-option v-for="item in idTypeList" :key="Number(item.dictValue)" :label="item.dictLabel" :value="Number(item.dictValue)">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-if="formData.affiliate.organizeFlag == 0 && formData.affiliate.idType == 0">
<el-form-item label="申请人身份证号码" prop="affiliate.code" :rules="[
<el-col :span="12" v-if="formData.affiliate.organizeFlag == 0">
<el-form-item label="证件号码" prop="affiliate.code" :rules="[
{
required: true,
message: '申请人身份证号不能为空',
trigger: 'blur',
},
{
pattern:
/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
message: '请输入正确的身份证号码',
message: '证件号码不能为空',
trigger: 'blur',
},
]">
<el-input v-model="formData.affiliate.code" disabled placeholder="请输入申请人的身份证号" />
<el-input v-model="formData.affiliate.code" disabled placeholder="请输入申请人的证件号码" />
</el-form-item>
</el-col>
<el-col :span="12" v-if="formData.affiliate.organizeFlag == 0 && formData.affiliate.idType == 1">
<!-- <el-col :span="12" v-if="formData.affiliate.organizeFlag == 0 && formData.affiliate.idType == 1">
<el-form-item label="申请人护照号码" prop="affiliate.code" :rules="[
{
required: true,
@@ -238,7 +232,7 @@
]">
<el-input v-model="formData.affiliate.code" disabled placeholder="请输入申请人的申请人护照号" />
</el-form-item>
</el-col>
</el-col> -->
<el-col :span="12" v-if="formData.affiliate.organizeFlag == 0">
<el-form-item label="申请人邮箱" prop="affiliate.applicationEmail" :rules="[
{
@@ -428,7 +422,7 @@
<el-input v-model="formData.affiliate.respondentPhone" placeholder="请输入被申请人联系电话" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-col :span="12">
<el-form-item label-width="150px" label="被申请人申请人住所" prop="affiliate.respondentHome" :rules="[
{
required: true,
@@ -457,43 +451,42 @@
</el-form-item>
</el-col>
</el-row>
<el-col :span="12">
<el-form-item label-width="140px" label="被申请人身份证号" prop="affiliate.respondentIdentityNum" :rules="[
{
required: true,
message: '被申请人身份证号不能为空',
trigger: 'blur',
},
{
pattern:
/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
message: '请输入正确的身份证号码',
trigger: 'blur',
},
]">
<el-input v-model="formData.affiliate.respondentIdentityNum" @blur="handleBlur"
placeholder="请输入被申请人身份证号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label-width="140px" label="被申请人出生年月：" prop="affiliate.respondentBirth">
<el-date-picker disabled v-model="formData.affiliate.respondentBirth" type="date" placeholder="被申请人出生年月日">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="被申请人性别：" prop="affiliate.respondentSex" :rules="[
{
required: true,
message: '请选择性别',
},
]">
<el-radio-group v-model="formData.affiliate.respondentSex" disabled>
<el-radio :label="0">男</el-radio>
<el-radio :label="1">女</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label-width="140px" label="被申请人身份证号" prop="affiliate.respondentIdentityNum" :rules="[
{
required: true,
message: '被申请人身份证号不能为空',
trigger: 'blur',
},
{
pattern:
/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
message: '请输入正确的身份证号码',
trigger: 'blur',
},
]">
<el-input v-model="formData.affiliate.respondentIdentityNum" @blur="handleBlur" placeholder="请输入被申请人身份证号" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label-width="140px" label="被申请人出生年月：" prop="affiliate.respondentBirth">
<el-date-picker disabled v-model="formData.affiliate.respondentBirth" type="date" placeholder="被申请人出生年月日">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="被申请人性别：" prop="affiliate.respondentSex" :rules="[
{
required: true,
message: '请选择性别',
},
]">
<el-radio-group v-model="formData.affiliate.respondentSex" disabled>
<el-radio :label="0">男</el-radio>
<el-radio :label="1">女</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24" v-if="modelFlag">
<el-form-item v-for="item in formData.columnValueList" :label="item.name" :key="item.id">
<el-input type="textarea" v-model="item.value"></el-input>
@@ -534,7 +527,8 @@ import {
caseApplicationSelectById,
updateComfire,
getInfoByIdCard,
getUserInfo
getUserInfo,
getIdType
} from "@/api/caseManagement/caseManagement.js";
import { getTemplate } from "@/api/officialSeal/officialSeal.js";
import { getToken } from "@/utils/auth";
@@ -547,7 +541,7 @@ export default {
"tabFlag",
"addModifyData",
],
dicts: ["case_built_type"],
// dicts: ["id_type"],
data() {
return {
activeName: "first",
@@ -590,14 +584,14 @@ export default {
}
],
idTypeList: [
{
value: '身份证',
id: 0
},
{
value: '护照',
id: 1
}
// {
// value: '身份证',
// id: 0
// },
// {
// value: '护照',
// id: 1
// }
]
};
},
@@ -618,7 +612,7 @@ export default {
this.buttonFlag = false;
}
},
addVisable(val) {
async addVisable(val) {
if (val) {
if (this.addModifyData == 1) {
this.formData = {
@@ -640,16 +634,23 @@ export default {
this.showmediate = false;
this.getTemplateFn();
if (this.addModifyData != 1) {
this.caseApplicationSelectByIdFn(this.caseData.id);
await this.getIdTypeFn();
await this.caseApplicationSelectByIdFn(this.caseData.id);
}
}
},
},
created() {
console.log(this.formData, "000000000000000000")
// this.getUserInfoFn();
this.getIdTypeFn();
},
methods: {
/** 获取证件类型 */
getIdTypeFn(){
getIdType().then(res=>{
this.idTypeList = res.data;
})
},
/** 切换申请类型 */
changeApplyType(val) {
console.log(val, "变化");
@@ -668,10 +669,10 @@ export default {
})
},
/** 根据案件id获取对应信息 */
caseApplicationSelectByIdFn(data) {
async caseApplicationSelectByIdFn(data) {
this.applicantEvidence = [];
this.respondentEvidence = [];
caseApplicationSelectById({ id: data }).then((res) => {
await caseApplicationSelectById({ id: data }).then((res) => {
res.data.affiliate.respondentSex = Number(res.data.affiliate.respondentSex)
this.formData = res.data;
this.formData.caseAttachList.forEach((item) => {
@@ -709,7 +710,8 @@ export default {
},
/** 查看证据 */
fileDetil(val) {
window.open(this.fileURL + val);
// window.open(this.fileURL + val);
this.$router.push({ path: '/onlyoffice', query: { id: val, flag: 0 } })
},
/** 查看证据 */
toPreview(val) {
@@ -895,7 +897,8 @@ export default {
height: 700px !important;
overflow: auto !important;
}
::v-deep .el-input--medium .el-input__inner{
::v-deep .el-input--medium .el-input__inner {
height: 40px;
line-height: 40px;
}
src/views/caseManagement/components/mediation.vue
+4 -3
View File
@@ -81,7 +81,7 @@
<el-col :span="24">
<el-form-item label="调解书：" v-if="recordArrMediate.length > 0">
<div v-for="(item, index) in recordArrMediate" :key="index" style="color: blue">
<a href="#" @click="toFileMediate(item.annexPath)">{{ item.annexName }}</a>
<a href="#" @click="toFileMediate(item.onlyOfficeFileId)">{{ item.annexName }}</a>
</div>
</el-form-item>
</el-col>
@@ -289,8 +289,9 @@ export default {
toFile2(annexPath) {
window.open(window.location.origin + "/API" + annexPath, "_black");
},
toFileMediate(annexPath) {
window.open(window.location.origin + "/API" + annexPath, "_black");
toFileMediate(val) {
// window.open(window.location.origin + "/API" + annexPath, "_black");
this.$router.push({ path: '/onlyoffice', query: {id:val,flag:1} })
},
/** 生成调解书 */
mediationFn(data) {
src/views/onlyoffice/onlyoffice.vue
+121
View File
@@ -0,0 +1,121 @@
<template>
<div style="width: 100%;height: 100%;">
<div id="placeholder"></div>
</div>
</template>
<script>
import { getOnlyoffice, saveOnlyOfficeFile } from "@/api/onlyoffice/onlyoffice"
import store from "@/store"
import axios from 'axios'
export default {
props: [],
data() {
return {
config: {},
flag: 0,
userId: store.getters.userId,
websock: null
};
},
destroyed() {
//页面销毁时关闭ws连接
if (this.websock) {
this.websock.close() // 关闭websocket
}
},
methods: {
getConfig(id) {
let edit = edit;
if (this.flag == 0) {
edit = 'view';
} else {
edit = 'edit'
}
axios.get(`http://121.40.189.20:9090/onlyOfficeConfig/${edit}/${id}/${this.userId}/desktop/true`).then(res => {
this.config = res.data;
// this.config.callbackUrl = this.config.callbackUrl + `/${this.userId}`;
console.log(res.data,"OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO");
var docEditor = new DocsAPI.DocEditor("placeholder", this.config);
})
},
//初始化weosocket
initWebSocket() {
if (typeof (WebSocket) === "undefined") {
alert("您的浏览器不支持WebSocket")
return false
}
const wsuri = `ws://121.40.189.20:9090/api/websocket/${this.userId}` // websocket地址
this.websock = new WebSocket(wsuri)
this.websock.onopen = this.websocketonopen
this.websock.onmessage = this.websocketonmessage
this.websock.onerror = this.websocketonerror
this.websock.onclose = this.websocketclose
},
//连接成功
websocketonopen() {
console.log('WebSocket连接成功')
},
//接收后端返回的数据
websocketonmessage(e) {
let dataJson = e.data;
if (dataJson != "conn_success") {
dataJson = JSON.parse(dataJson);
}
if (dataJson.caseId) {
saveOnlyOfficeFile({
caseAppliId: Number(dataJson.caseId),
annexName: dataJson.fileName,
annexPath: dataJson.filePath,
onlyOfficeFileId: dataJson.fileId
}).then(res => {
this.websock.send()
})
}
// 在这里使用后端返回的数据，对数据进行处理渲染
},
//连接建立失败重连
websocketonerror(e) {
console.log(`连接失败的信息：`, e)
this.initWebSocket() // 连接失败后尝试重新连接
},
//关闭连接
websocketclose(e) {
console.log('断开连接', e)
},
// 点击按钮
// btnClick() {
// // 因为需求是每次点击都是发起不同ws连接，拿到的数据也不一致，所以连接前要先断开上次的连接
// if (this.websock) {
// this.websock.close() // 关闭websocket连接
// }
// this.initWebSocket() // 初始化weosocket，发起连接
// // 这里使用定时器是为了等待连接后才发送数据，避免错误
// setTimeout(() => {
// //添加状态判断，当为OPEN时，前端发送消息给后端
// if (this.websock.readyState === 1) {
// // 把后台需要的参数数据传过去
// let obj = {
// jobId: 111,
// token: 'xxxxx',
// message: 'send ok'
// }
// //发给后端的数据需要字符串化
// this.websock.send(JSON.stringify(obj))
// }
// }, 500)
// }
},
mounted() {
let id = this.$route.query.id;
this.flag = this.$route.query.flag;
this.getConfig(id);
this.initWebSocket();
console.log(this.userId, "PPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPPP");
},
watch: {
}
};
</script>
<style lang="scss" scoped></style>
src/views/register.vue
+10 -10
View File
@@ -30,7 +30,7 @@
<el-form-item prop="idType">
<el-select v-model="registerForm.idType" placeholder="证件类型" auto-complete="off" style="width: 100%;">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
<el-option v-for="item in idTypeList" :key="item.id" :label="item.value" :value="item.id">
<el-option v-for="item in idTypeList" :key="Number(item.dictValue)" :label="item.dictLabel" :value="Number(item.dictValue)">
</el-option>
</el-select>
@@ -105,7 +105,7 @@
</template>
<script>
import { getCodeImg, register, sendCode, wxregister,verifyUserName } from "@/api/login";
import { getCodeImg, register, sendCode, wxregister,verifyUserName,getIdType } from "@/api/login";
import { listRoleNotoken } from "@/api/system/role.js"
export default {
name: "Register",
@@ -215,25 +215,25 @@ export default {
}
],
idTypeList:[
{
value:'身份证',
id:0
},
{
value:'护照',
id:1
}
]
};
},
created() {
this.getCode();
this.getListRole();
this.getIdTypeFn();
},
methods: {
changeInput(){
verifyUserName({userName:this.registerForm.userName})
},
/** 获取证件类型 */
getIdTypeFn(){
getIdType().then(res=>{
this.idTypeList = res.data;
})
},
/**获取角色 */
getListRole() {
listRoleNotoken().then(res => {