onlyoffice在线编辑

public/index.html

@@ -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

@@ -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

@@ -83,4 +83,11 @@ export function verifyUserName(data) {
 		method: 'get',
 		params:data
 	})
+}
+// 获取证件类型
+export function getIdType() {
+  return request({
+    url: '/system/dict/data/type/skipToken/id_type',
+    method: 'get',
+  })
 }

src/api/onlyoffice/onlyoffice.js

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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 => {